javascript - 单击和取消焦点时添加和删除样式的功能

Question

我正在尝试实现一个功能，该功能可以在单击时更改元素的样式，并在未聚焦时将其删除。例如:当 element2 被点击时，它应该删除其他元素的类，并且只为被点击的元素添加类。

<div class="dope" id="element777"></div>
<div class="dope" id="element2"></div>
<div class="dope" id="element11"></div>
<div class="dope" id="element245"></div>
<div class="dope" id="element60"></div>

.....(自动创建更多，数量无法估计)

我不知道创建的元素 ID。唯一保持不变的是类(Class)。我试过这个，但这是一种不专业的方法。

$('#element1').click(function(){

$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);

});

$("#element1").blur(function(){
$("#element1").removeClass(dope);
});



$('#element2').click(function(){

$("#element2").addClass(dope2);
$("#element1").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);

});

$("#element2").blur(function(){
$("#element2").removeClass(dope);
});

自动化此功能的最佳方法是什么，而不是向所有元素添加点击和模糊(散焦)功能？

Answer 1

您可以在任何具有包含单词“元素”的 id 的 div 上监听点击事件，然后定位其兄弟元素(那些未被点击的元素，而不是通过 id 引用它们)。这可能会做到这一点:

$("div[id*='element']").click(function(){
    $(this).addClass('dope').siblings('.dope').removeClass('dope');
});