jquery到纯javascript按钮点击

Question

我正在寻找帮助将这个jquery代码转换为纯javascript

$(".list .btn").click(function(){
$(".list li").removeClass("menuActive");
$(this).parent().addClass("menuActive");
});
$(".popup").click(function(){
$(".list li").removeClass("menuActive");
}); 
<div id="button-row">
<ul class="list">
<li class=" ">
<button class="btn">click</button>
<div class="popup"></div>
</li>
<li class=""><button class="btn">click</button>2 <div class="popup"></div></li>
<li class=""><button class="btn">click</button>3 <div class="popup"></div></li>
</ul>

我真的不想添加jquery到我的网站，我需要一个纯javascript的解决方案。

Answer 1

这是一个普通的JS委托

const list = document.querySelector("#button-row .list");
const resetLI = () => [...list.querySelectorAll("li")].forEach(li => li.classList.remove("menuActive"));
list.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("btn")) {
resetLI();
tgt.closest("li").classList.add("menuActive");
} else if (tgt.classList.contains("popup")) {
resetLI();
}
});

.menuActive {
background-color: red
}

<div id="button-row">
<ul class="list">
<li class=" ">
<button class="btn">click</button> 1
<div class="popup">Pop</div>
</li>
<li class=""><button class="btn">click</button> 2
<div class="popup">Pop</div>
</li>
<li class=""><button class="btn">click</button> 3
<div class="popup">Pop</div>
</li>
</ul>