Переключить узлы - JavaScript

Question

Я пытаюсь перебрать 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 перезаписывается впетля.Я меняю порядок, это тот же эффект.

Сценарий:
Есть 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>

Answer 1

Если у вас есть более одного элемента .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>

Answer 2

отображаемая вами модель DOM не содержит ".product-current-price" или ".product-promo-price p", по этой причине никакие X и Y не определены.

Приветствия.

Answer 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
}