Узлы переключения - javascript
Я пытаюсь перебрать DOM-элементы с помощью querySelectorAll, но не могу заставить свой скрипт работать.
Отвечать:
x = document.querySelectorAll('.product-promo-price p');
y = document.querySelectorAll(".product-current-price");
for(var i = 0; i < y.length; i++){
var temp = y[i].innerText; // hold value you are going to overwrite
y[i].innerText=x[i].innerText; // overwrite it
x[i].innerText = temp // use the temp variable to set x
}
проблема в том, что x перезаписывается в цикле for. Я меняю порядок, это тот же эффект.
Сценарий:
Есть 2 узла DOM (.product-promo-price p и .product-current-price)
Мне нужно переключить контент на этих двух DOM-узлах.
<div class = "caption">
<div class = "product-color">
<span style = "background-color: #000000; " data-product-id = "7272"></span>
<span style = "background-color: #0099FF; " data-product-id = "7273"></span>
</div>
<h4 class = "product-brand">Huawei</h4>
<h3 class = "product-title" title = "Mate 20 Lite">Mate 20 Lite</h3>
<h4 class = "product-promo-subscription">m/ 12, mnd avtale</h4>
<div class = "main-price">
<p class = "product-current-price">3.290,-</p>
</div>
<p class = "price-mode-label"></p>
<div class = "product-promo-price">
<p>3.290,-</p>
</div>
<div class = "total-price">
<p>Minste totalpris første 12 mnd - fra: 5.678,-</p>
</div>
</div>
Если у вас нет одинакового количества элементов для промо-цены и текущей цены, вы всегда будете выдавать ошибку.
x определяется с y, поэтому, если на x нельзя ссылаться, зачем тогда y?
Всегда есть одинаковые числа (длина)
Как я могу переключить innerText между X и Y. Теперь переключается только один
как только вы переключите один из них, то не знаете, как вы собираетесь переключить его обратно, поскольку вы только что его перезаписали.
x = [1,1,1] и y = [2,2,2]. После первого цикла у вас x = [1,1,1] и y = [1,1,1], и вы хотите знать, почему вы не получаете обратно [2,2,2]?
Я пытался объяснить, ПОЧЕМУ это не работает. Решение, поменять местами их в одном цикле с временной переменной.
Спасибо @epascarello за объяснение, почему это не работает.
Вы должны делать это на стороне сервера, а не с помощью JS. Кто-то может прочитать текущий приз и подумать, что это текущий приз, но на самом деле это промо-приз. С юридической точки зрения это может быть опасно. А как насчет пользователей без JS?
Используется для A / B-тестирования @HerrSerker. Если Javascript отключен, не беспокойтесь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы перезаписываете массив, а затем пытаетесь использовать этот перезаписанный массив, чтобы вернуть значения в другой. Это сложно сделать, когда вы уже изменили значения.
Делайте это в одну петлю, а не в две. Используйте временную переменную для хранения перезаписываемого значения.
for(var i = 0; i < y.length; i++){
var temp = y[i].innerText; // hold value you are going to overwrite
y[i].innerText=x[i].innerText; // overwrite it
x[i].innerText = temp // use the temp variable to set x
}
Если у вас есть более одного элемента .caption с призами, и есть лишь небольшая вероятность, что у одного из них нет текущего приза или промо-приза, тогда у вас будут большие проблемы. Казалось бы, вы бы случайно переключали призы между смартфонами.
Так что было бы лучше перебрать каждый .caption и поменять призы для каждой подписи.
console.clear();
var captions = document.querySelectorAll('.caption')
for(var i = 0; i < captions.length; i++) {
let caption = captions[i];
let promoPrice = caption.querySelector('.product-promo-price p');
let currentPrice = caption.querySelector('.product-current-price');
let temp = promoPrice.textContent;
promoPrice.textContent = currentPrice.textContent;
currentPrice.textContent = temp;
}<div class = "caption">
<div class = "product-color">
<span style = "background-color: #000000; " data-product-id = "7272"></span>
<span style = "background-color: #0099FF; " data-product-id = "7273"></span>
</div>
<h4 class = "product-brand">Huawei</h4>
<h3 class = "product-title" title = "Mate 20 Lite">Mate 20 Lite</h3>
<h4 class = "product-promo-subscription">m/ 12, mnd avtale</h4>
<div class = "main-price">
<p class = "product-current-price">3.490,- C</p>
</div>
<p class = "price-mode-label"></p>
<div class = "product-promo-price">
<p>3.290,- P</p>
</div>
<div class = "total-price">
<p>Minste totalpris første 12 mnd - fra: 5.678,-</p>
</div>
</div>
<div class = "caption">
<div class = "product-color">
<span style = "background-color: #000000; " data-product-id = "7272"></span>
<span style = "background-color: #0099FF; " data-product-id = "7273"></span>
</div>
<h4 class = "product-brand">Huawei</h4>
<h3 class = "product-title" title = "Mate 20 Lite">Mate 10 Pro</h3>
<h4 class = "product-promo-subscription">m/ 24</h4>
<div class = "main-price">
<p class = "product-current-price">4.390,- C</p>
</div>
<p class = "price-mode-label"></p>
<div class = "product-promo-price">
<p>12.290,- P</p>
</div>
<div class = "total-price">
<p>Minste totalpris første 12 mnd - fra: 5.678,-</p>
</div>
</div>DOM, который вы показываете, не содержит ".product-current-price" или ".product-Promo-price p", по этой причине никакие X и Y не определены.
Привет.
О чем ты говоришь
xявляется определен внутри вашего цикла. Что заставляет вас думать, что это не так? Также поможет показать нам ваш HTML.