Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Переписать функцию из jQuery в нативный JavaScript (https://javascript.ru/forum/jquery/74009-perepisat-funkciyu-iz-jquery-v-nativnyjj-javascript.html)

MC-XOBAHCK 05.06.2018 16:36
Переписать функцию из jQuery в нативный JavaScript
 
Здравствуйте!
Помогите пожалуйста переписать функцию написанную с jQuery на чистый JS.
Код в этом посту: https://javascript.ru/forum/misc/701...tml#post462687
начиная с 27 строчки.

У меня просто не хватает знаний и опыта сделать это самостоятельно.
Причина - я значительно расширил своё приложение и пишу на чистом js. На jQuery осталась только эта функция, написанная laimas.
Я переодически делаю попытки переписать код, но у меня не получается (вся консоль в ошибках). Вот решил попросить помощи на форуме...

Nexus 05.06.2018 17:10
Попробуйте так:
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'));

MC-XOBAHCK 05.06.2018 18:39
Nexus, спасибо вам за помощь!

Я код вставил в скрипт - работает только частично, при этом ошибок в консоли нет.
Не реагирует на ввод в инпуты.

Расставляю console.log('+1'); в строки 30 и перед 28 - в кансоли пусто.

Ставлю console.log(side) в 26 строчку - в консоль выводит вот такое:


К сожалению я не знаю что должно выводить как side.

MC-XOBAHCK 05.06.2018 18:46
По идее должен быть какой то массив.
Может ли это быть из за того что у меня у родителей прописан display: none? (у меня пошагово сначала идёт выбор форм, а уже вторым шагом ввод размеров).
Может нужно заменить все display: none на visibility: hidden

Nexus 06.06.2018 12:11
Цитата:
Сообщение от MC-XOBAHCK
По идее должен быть какой то массив.
В side должен быть массив с текстовыми инпутами, display и visibility на скрипт не влияют.
У вас у всех инпутов атрибут type установлен?

j0hnik 06.06.2018 12:41
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>

MC-XOBAHCK 06.06.2018 15:06
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

Nexus 06.06.2018 15:50
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;
	});
};

MC-XOBAHCK 06.06.2018 16:53
Nexus,
Спасибо Вам! Код работает.


Часовой пояс GMT +3, время: 07:34.