使用JS在每次点击时显示不同的内容

Question

我有一个我正在尝试做的示例代码 - 当您点击其中一个尺码，即 li 时，它会在新的 [=22] 中显示该商品的尺码和价格=]叫价。

目前发生的情况是，无论我选择哪个尺寸，都会显示第一个尺寸和价格，并且会不断添加新的 div。我想要的是点击要显示的任何 li 以及每次替换 div 的内部内容。任何关于我哪里出错的帮助将不胜感激。

var sizeSelector = document.querySelectorAll('.container li');
sizeSelector.forEach(function(el) {
  el.addEventListener('click', function() {
    runFunction();
  });
});

function runFunction() {
  var newPrice = document.querySelector('.container li').innerHTML;
  document.querySelector('.container').insertAdjacentHTML("afterend", "<div class='price'>" + newPrice + "</div>");
  console.log(newPrice);
}

<ul class='container'>
  <li>Size Small </li>
  <li>Size Medium </li>
  <li> Size large </li>
</ul>

Answer 1

您使用的代码只需要对 runFunction 进行小幅调整，并将包含价格 class 的 div 包含在原始 HTML 模板中.通过这样做，我们可以定位 div 并单独更新其内容。

var sizeSelector = document.querySelectorAll('.container li');
sizeSelector.forEach(function(el) {
  el.addEventListener('click', function(evt) {
    runFunction(evt);
  });
});

function runFunction(evt) {
  const newPrice = document.querySelector('.container li').innerHTML;
  const priceDiv = document.querySelector('.price');
  priceDiv.innerHTML = evt.target.innerHTML;
  console.log(priceDiv.innerHTML);
}

<ul class='container'>
  <li>Size Small </li>
  <li>Size Medium </li>
  <li>Size large </li>
</ul>
<div class='price'></div>

使用JS在每次点击时显示不同的内容

Display different content on each click using JS

javascript

function

click

addeventlistener