0

目前，我正在使用这个片段：

$('.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函数toggle()显示需要的区域，如果我再次点击，切换隐藏它，并且我正在向该区域添加背景颜色。

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

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

如何解决这个问题？

4

1 回答 1

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");
于 2013-02-21T13:14:15.140 回答