在打开一个时关闭其他特定类

Question

我有一组 div 个元素，它们不是彼此的子元素，每个元素都有单独的背景图像，因此使用单独的 class 名称。

点击其中一个时，我希望它通过交换背景图像来突出显示。如果另一个 div 被突出显示，我想通过交换其背景图像来取消突出显示。如果单击相同的突出显示 div，我想取消突出显示它。

我目前的方法是通过 toggleClass 完成此操作，我设法交换了我点击的 div 的 class，但没有交换其他的返回。

我之前用 div 元素管理过这个，这些元素都通过使用 .not 功能交换到相同的 class，但我很难用 div 个元素使用单独的、特定的 classes.

此处为 JSFiddle 版本：https://jsfiddle.net/el_simmo/8cnu776j/3/

$(document).ready(function(){
    var theboxes = $("#svg1 #svg2 #svg3");
    var clickclasses = $("svg1classclick svg2classclick svg3classclick");

    $("[id^='svg']").on("click", function(){
        var thissvg = $(this);
        var svgclick = $(this).attr("id") + "classclick";
        thissvg.toggleClass(svgclick);
        theboxes.not(thissvg).removeClass(clickclasses);
    });
});

Answer 1

您应该在元素之间使用公共 class。在本例中，我对突出显示的元素使用 class .clicked，对所有元素使用 .svg-wrapper。这样做，您可以轻松 select 元素以及 add/remove 来自元素的 class。

Updated Example

$('.svg-wrapper').on('click', function () {
    $(this).toggleClass('clicked');
    $('.svg-wrapper').not(this).removeClass('clicked');
});

然后您可以更新 CSS 来为点击的变体设置样式：

#svg1 {
    /* Initial background */
}
#svg1.clicked {
    /* Clicked background */
}

Answer 2

您可以通过使用常见的 classes 极大地改进您的逻辑并使您的代码变干。首先，将通用的 class 应用于您希望可点击的所有 div 元素，在我的示例中，我使用 svgContainer:

<div>
    <div id="svg1" class="svgContainer"></div>
</div>
<div>
    <div id="svg2" class="svgContainer"></div>
</div>
<div>
    <div id="svg3" class="svgContainer"></div>
</div>

从那里您可以使用以下更简单的逻辑通过单个 highlight class:

打开和关闭突出显示

$(".svgContainer").on("click", function () {
    $(this).toggleClass('highlight');
    $('.svgContainer').not(this).removeClass('highlight');
});

.svgContainer { 
    height: 60px;
    background-repeat: no-repeat;
}
#svg1 {
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/teacher.svg");
}
#svg1.highlight {
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/teacher-purple.svg");
}
#svg2 {
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/student.svg");
}
#svg2.highlight {
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/student-purple.svg");
}
#svg3 {
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/support.svg");
}
#svg3.highlight {
    background-image: url("http://fdslive.oup.com/www.oup.com/elt/general_content/global/measuring_impact/images/svgs/support-purple.svg");
}

Working fiddle

注意在 CSS 中使用复合 class 选择器意味着你只需要切换一个 class，这使得 JS 代码简单很多。

在打开一个时关闭其他特定类

Toggle other specific classes off when toggling one on

jquery

class

toggleclass

在打开一个时关闭其他特定 类

Toggle other specific classes off when toggling one on

jquery

class

toggleclass

在打开一个时关闭其他特定类