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。唯一保持不变的是阶级。我试过这个，但这是一种不专业的方法。

$('#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

你可以在任何包含单词“element”的div上侦听click事件，然后定位其兄弟元素（那些未被点击的元素，而不是通过id引用它们。）这可能会这样做：

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

Answer 2

如果您利用this和siblings，您的jQuery可能会简单得多：

而不是：

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

可能是：

$('.dope').click(
    function() {
        $(this).addClass(dope2).siblings().removeClass(dope);
    }
);

注意：您是否有一个名为dope的变量，其中包含类名，或者dope是否为类名？如果是类名，则需要将其放在引号中：$(this).addClass('dope2')等等。

如果要删除课程dope，则需要添加一个始终用于选择这些元素的类（以便在删除dope时将其删除继续工作）。

Answer 3

按钮部分：

$("div").click(function(){
    if($(this).hasClass("dope") || $(this).hasClass("dope2")){
        $(this).addClass("dope2");
        $(".dope").not($(this)).removeClass("dope");
    }
})

模糊部分：

$("div").blur(function(){
    if($(this).hasClass("dope") || $(this).hasClass("dope2")){
        $(this).removeClass("dope");
     }
}

Answer 4

我建议使用：focus css选择器而不是使用javascript来做你正在做的事情...阅读更多here。焦点选择器不再使用单击侦听器，而是为您处理，并在元素失焦时自动删除样式。

在单击和非焦点上添加和删除样式的功能

4 个答案: