JS实现点击不同li替换展示对应尺寸价格功能的问题求助

原有代码问题点 #

• 点击事件触发时没有将当前点击的li元素传入处理函数，document.querySelector('.container li')默认仅返回匹配到的第一个li元素，导致无论点击哪个选项都只拿到第一个尺寸的内容
• 每次点击都调用insertAdjacentHTML插入新的.price节点，没有复用已有的节点，导致重复生成div

修正后代码 #

JS代码（基于原有逻辑最小修改） #

var sizeSelector = document.querySelectorAll('.container li');
var container = document.querySelector('.container');
// 提前初始化价格展示节点，不存在则创建，存在则复用
var priceNode = document.querySelector('.price');
if (!priceNode) {
  priceNode = document.createElement('div');
  priceNode.className = 'price';
  container.insertAdjacentElement('afterend', priceNode);
}

sizeSelector.forEach(function(el) {
  el.addEventListener('click', function() {
    // 将当前点击的元素传入处理函数
    runFunction(el);
  });
});

function runFunction(activeLi) {
  var newPrice = activeLi.innerHTML;
  // 直接更新已有节点内容，不重复插入
  priceNode.innerHTML = newPrice;
  console.log(newPrice);
}

HTML代码无需修改 #

<ul class='container'>
  <li>Size Small $20</li>
  <li>Size Medium $30</li>
  <li> Size large $40</li>
</ul>

内容的提问来源于stack exchange，提问作者leek1234