05.06.2018, 16:36
|
 |
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
Переписать функцию из jQuery в нативный JavaScript
Здравствуйте!
Помогите пожалуйста переписать функцию написанную с jQuery на чистый JS.
Код в этом посту: https://javascript.ru/forum/misc/701...tml#post462687
начиная с 27 строчки.
У меня просто не хватает знаний и опыта сделать это самостоятельно.
Причина - я значительно расширил своё приложение и пишу на чистом js. На jQuery осталась только эта функция, написанная laimas.
Я переодически делаю попытки переписать код, но у меня не получается (вся консоль в ошибках). Вот решил попросить помощи на форуме... |
|
05.06.2018, 17:10
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
Попробуйте так:
document.addEventListener('DOMContentLoaded', function() {
var dir,
sqr = '²',
mul = {
'01': 100,
'12': 10,
'02': 1000,
'10': .01,
'21': .1,
'20': .001
},
dim = [{
unt: ' м',
dec: 2,
mul: 1
}, {
unt: ' см',
dec: 0,
mul: .0001
}, {
unt: ' мм',
dec: 0,
mul: .000001
}],
side = [].slice.call(document.querySelectorAll('input[type="text"]'));
side.forEach(function(node) {
node.addEventListener('keyup', function() {
this.value = this.value.replace(/[,\.]+/, '.').replace(/[^\d.]/, '');
var u = unit.filter(function(node) {
return !!node.checked;
}).shift().value || '';
[].forEach.call(document.querySelectorAll('[data-area]'), function(node) {
var group = node.dataset.area,
values = side.filter(function(node) {
return node.classList.contains(group);
}).map(function(e) {
return parseFloat(e.value) || 0;
}),
area = calculate(group, values);
[].forEach.call(node.querySelectorAll('.area'), function(e, i) {
e.textContent = area[i] ? (area[i] * dim[u].mul).toFixed(2) + ' м' + sqr : '';
});
})
});
});
var unit = [].slice.call(document.querySelectorAll('input[type="radio"]'));
unit.forEach(function(node) {
node.addEventListener('change', function() {
var u = this.value,
d = dir + u;
[].forEach.call(document.querySelectorAll('.unit'), function(node) {
node.textContent = dim[u].unt;
});
side.forEach(function(node) {
var v = parseFloat(node.value);
if (v)
node.value = (v * mul[d]).toFixed(dim[u].dec);
});
side.forEach(function(node) {
node.dispatchEvent(new Event('keyup'));
});
});
node.parentElement.addEventListener('mousedown', function() {
dir = unit.filter(function(node) {
return !!node.checked;
}).shift().value || '';
});
});
});
if (document.readyState === 'complete')
document.dispatchEvent(new Event('DOMContentLoaded'));
Последний раз редактировалось Nexus, 05.06.2018 в 17:15.
|
|
05.06.2018, 18:39
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
Nexus, спасибо вам за помощь!
Я код вставил в скрипт - работает только частично, при этом ошибок в консоли нет.
Не реагирует на ввод в инпуты.
Расставляю console.log('+1'); в строки 30 и перед 28 - в кансоли пусто.
Ставлю console.log(side) в 26 строчку - в консоль выводит вот такое:
К сожалению я не знаю что должно выводить как side.
|
|
05.06.2018, 18:46
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
По идее должен быть какой то массив.
Может ли это быть из за того что у меня у родителей прописан display: none? (у меня пошагово сначала идёт выбор форм, а уже вторым шагом ввод размеров).
Может нужно заменить все display: none на visibility: hidden
|
|
06.06.2018, 12:11
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
|
Сообщение от MC-XOBAHCK
|
|
По идее должен быть какой то массив.
|
В side должен быть массив с текстовыми инпутами, display и visibility на скрипт не влияют.
У вас у всех инпутов атрибут type установлен? |
|
06.06.2018, 12:41
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Nexus,
да, проблема именно в этом
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.st1 {display: inline-block;margin-top: 8px;width: 80px;text-align: right;}
.st2 {display: inline-block;}h4 {color: #c3410d;}input {width: 110px;}
input[type="radio"] {width: 25px;}
.col-sm-4 {width:220px;display:inline-block;border:solid 1px #888;padding:5px;margin-left:10px;background:#eee;}
.col-sm-6 {width:250px;display:inline-block;border:solid 1px #888;padding:5px;margin-left:10px;background:#eee;}
</style>
<script>
function triangle(a, b) {
return a * b * .5
}
function trapeze(a, b, c) {
return (a + b) * c * .5
}
function calculate(g, v) {
var a, b, c, d, e, f;
switch(g) {
case 'figura': a = trapeze(v[0], v[1], v[2]), b = triangle(v[3], v[4]), c = trapeze(v[5], v[6], v[7]), d = trapeze(v[8], v[9], v[10]), e = trapeze(v[11], v[12], v[13]);
return [a, b, c, d, e, a && b && c && d && e ? (a + b + c + d + e) : 0];
break;
}
}
document.addEventListener('DOMContentLoaded', function() {
var dir,
sqr = '²',
mul = {
'01': 100,
'12': 10,
'02': 1000,
'10': .01,
'21': .1,
'20': .001
},
dim = [{
unt: ' м',
dec: 2,
mul: 1
}, {
unt: ' см',
dec: 0,
mul: .0001
}, {
unt: ' мм',
dec: 0,
mul: .000001
}],
side = [].slice.call(document.querySelectorAll('input[type="text"]'));
side.forEach(function(node) {
node.addEventListener('keyup', function() {
this.value = this.value.replace(/[,\.]+/, '.').replace(/[^\d.]/, '');
var u = unit.filter(function(node) {
return !!node.checked;
}).shift().value || '';
[].forEach.call(document.querySelectorAll('[data-area]'), function(node) {
var group = node.dataset.area,
values = side.filter(function(node) {
return node.classList.contains(group);
}).map(function(e) {
return parseFloat(e.value) || 0;
}),
area = calculate(group, values);
[].forEach.call(node.querySelectorAll('.area'), function(e, i) {
e.textContent = area[i] ? (area[i] * dim[u].mul).toFixed(2) + ' м' + sqr : '';
});
})
});
});
var unit = [].slice.call(document.querySelectorAll('input[type="radio"]'));
unit.forEach(function(node) {
node.addEventListener('change', function() {
var u = this.value,
d = dir + u;
[].forEach.call(document.querySelectorAll('.unit'), function(node) {
node.textContent = dim[u].unt;
});
side.forEach(function(node) {
var v = parseFloat(node.value);
if (v)
node.value = (v * mul[d]).toFixed(dim[u].dec);
});
side.forEach(function(node) {
node.dispatchEvent(new Event('keyup'));
});
});
node.parentElement.addEventListener('mousedown', function() {
dir = unit.filter(function(node) {
return !!node.checked;
}).shift().value || '';
});
});
});
if (document.readyState === 'complete')
document.dispatchEvent(new Event('DOMContentLoaded'));
</script>
</head>
<label><input type="radio" name="unit" value="0" checked="" />В метрах</label>
<label><input type="radio" name="unit" value="1" /> сантиметры</label>
<label><input type="radio" name="unit" value="2" /> миллиметры</label>
<h3>Площадь</h3>
<div class="row plos" data-area="figura">
<div class="col-sm-4">
<h4>Сигмент 1</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<h4>Сигмент 2</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<h4>Сигмент 3</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-4">
<h4>Сигмент 4</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<h4>Сигмент 5</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-6">
<img src="http://i.piccy.info/i9/5dc9e1044199780a5c682345c5e8e242/1503672360/7796/1170341/G_111.jpg" style="margin-bottom: 5px;" /><br>
Площадь 1 сигмента: <span class="area"></span><br>
Площадь 2 сигмента: <span class="area"></span><br>
Площадь 3 сигмента: <span class="area"></span><br>
Площадь 4 сигмента: <span class="area"></span><br>
Площадь 5 сигмента: <span class="area"></span><br>
<div class="rezultat ">ПЛОЩАДЬ всей фигуры = <span class="area"></span></div>
</div>
</div>
Последний раз редактировалось j0hnik, 06.06.2018 в 12:57.
|
|
06.06.2018, 15:06
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
Nexus, j0hnik, СПАСИБО Вам!
Да, у меня небыли проставлены тайпы. Я бы сам нескоро бы нашёл, разве что случайно. С jQuery работало и я бы даже не подумал на стороне HTML искать ошибку, несмотря на то, что в querySelectorAll чётко прописано input[type="text"].
Помогите пожалуйста мне ещё вот такую (последнюю) строчку перевести на JS из этого скрипта:
if(~this.className.indexOf('pair')) side.not(this).filter('.'+/pair\S+/.exec(this.className)[0]).val(this.value);
Этот код вставляется в 56 строку, если смотреть по исправленному коду выше, который добавил j0hnik.
Пост с оригиналом этом строки: https://javascript.ru/forum/misc/701...tml#post462715
|
|
06.06.2018, 15:50
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,726
|
|
MC-XOBAHCK,
if(~this.className.indexOf('pair')){
const that=this;
const className=/pair\S+/.exec(this.className)[0];
side.filter(function(node){
return node.classList.contains(className) && node!==that;
}).forEach(function(node){
node.value=that.value;
});
};
|
|
06.06.2018, 16:53
|
|
Профессор
|
|
Регистрация: 06.08.2017
Сообщений: 473
|
|
|
Nexus,
Спасибо Вам! Код работает.
|
|
|
|
