Question

目前，我正在使用此代码段：

$('.element-block').click(function(){
    $(this).siblings(".key-element").toggle();

    $('.background-area').removeClass("active_bg");
    $(this).parent('.background-area').addClass("active_bg");
});

我有DIV元素的列表。在此块中，当我点击.element-block时，jQuery功能切换（）会显示所需的区域，如果我再次点击，切换隐藏它也是我在这个区域添加背景颜色。

这很好用，例如：我点击A .block-element - 数据出现+背景颜色已更改。然后我点击B .block-element - 数据出现+背景颜色已更改。凉。

但是，如果我点击A .block-element - 数据出现+背景颜色已更改，然后如果我再次点击A .block-element - 数据将被隐藏，但背景颜色是没有改变。

如何解决此问题？

Answer 1

那是因为你总是在加课。您可以事先检查是否要将其删除或添加它：

var $active_bg = $('.background-area.active_bg').removeClass("active_bg");
var $bg = $(this).parent('.background-area');

// Only add the class if the current background didn't have the class
if ($bg[0] !== $active_bg[0]) {
    $bg.addClass("active_bg");
}

上述代码只允许一个.background-area元素处于“活动状态”。如果可以有多个，您可以将代码简化为：

$(this).parent('.background-area').toggleClass("active_bg");

jQuery toggle（） - 为活动元素添加和删除类

1 个答案: