Question

我正在尝试用querySelectorAll遍历DOM元素，但是我无法使我的脚本正常工作。

答案：

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>

Answer 1

您覆盖了一个数组，然后尝试使用该覆盖的数组将值放回到另一个数组中。当您已经更改了值时，很难做到这一点。

一圈而不是两圈地做。使用临时变量保存要覆盖的值。

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
}

Answer 2

如果您有多个具有奖品的.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 3

您显示的DOM不包含“ .product-current-price”或“ .product-promo-price p”，因此未定义X和Y。

问候。

切换节点-JavaScript

3 个答案: