代码之家 › 专栏 › 技术社区 › Asim

交换节点-javascript

dom javascript

Asim · 技术社区 · 7 年前

我正在尝试使用 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>

3 回复 | 直到 7 年前

epascarello 7 年前

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

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
}

yunzen 7 年前

如果您有多个 .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>

-2

Neil Ruiz 7 年前

问候语。