Javascript 使用UI反馈在多个元素上切换类

我有一个列表（空格仅用于视觉清晰度）：

我想做两件事：

当相应的

）出现时


没有一个地址是#2
大多数显示/隐藏而不是切换类
很少有人解释，因此很难重复答案并理解它们是如何工作的（这是我的最终目标）
此解决方案使用
数据选择器
属性来保存与特定链接相关的项目的选择器。它有助于使JS真正干净

至于活动链接，我们只需从所有链接中删除
.active
，并将其添加到刚刚单击的链接中


JS

$(document).ready(function () {
    $('.links a').click(function () {

        // Remove .active from all links then add to the clicked one
        $('.links a').removeClass('active');
        $(this).addClass('active');

        // Remove .active from all lis then use the attribute data-selector to set
        // the relevant items
        $('.letters li').removeClass('active');
        $(this.getAttribute('data-selector')).addClass('active');
    });
});

.active {
    background-color:#AAA;
}

HTML

<div class="links">
    <a class="show-a" href="#" data-selector=".a">A</a>
    <a class="show-b" href="#" data-selector=".b">B</a>
    <a class="show-c" href="#" data-selector=".c">C</a>
    <a class="show-all active" href="#" data-selector=".a,.b,.c">ALL</a>
</div>

<ul class="letters">
    <li class="a">      A     </li>
    <li class="b">      B     </li>
    <li class="c">      C     </li>
    <li class="a b">    A B   </li>
    <li class="a c">    A C   </li>
    <li class="b c">    B C   </li>
    <li class="a b c">  A B C </li>
</ul>

此解决方案使用
数据选择器
属性来保存与特定链接相关的项目的选择器。它有助于使JS真正干净

至于活动链接，我们只需从所有链接中删除
.active
，并将其添加到刚刚单击的链接中


JS

$(document).ready(function () {
    $('.links a').click(function () {

        // Remove .active from all links then add to the clicked one
        $('.links a').removeClass('active');
        $(this).addClass('active');

        // Remove .active from all lis then use the attribute data-selector to set
        // the relevant items
        $('.letters li').removeClass('active');
        $(this.getAttribute('data-selector')).addClass('active');
    });
});

.active {
    background-color:#AAA;
}

HTML

<div class="links">
    <a class="show-a" href="#" data-selector=".a">A</a>
    <a class="show-b" href="#" data-selector=".b">B</a>
    <a class="show-c" href="#" data-selector=".c">C</a>
    <a class="show-all active" href="#" data-selector=".a,.b,.c">ALL</a>
</div>

<ul class="letters">
    <li class="a">      A     </li>
    <li class="b">      B     </li>
    <li class="c">      C     </li>
    <li class="a b">    A B   </li>
    <li class="a c">    A C   </li>
    <li class="b c">    B C   </li>
    <li class="a b c">  A B C </li>
</ul>

我想你想要这样的东西：

 $(function () {
    $("#user-controls div").first().addClass('active'); // <---add this line
    $("#user-controls").on('click', 'div', function () {
       $(this).addClass('active').siblings().removeClass('active'); //<--and this
       var classToShow = this.id.split('-')[1],
        filter = classToShow === "all" ? 'div' : '.' + classToShow;
        $("#devices").children().show().not(filter).hide();
    });
});

在页面加载之后，
#user controls
中的第一个div（即
all
）应该应用
.active
css类

关于这一点：

$("#user-controls div").first().addClass('active');

然后，如果在其他链接上单击，则在本例中，
.sibbins（）
是有用的函数

$(this).addClass('active').siblings().removeClass('active');

让我们把它分开：

$(this).addClass('active')

此行将类
.active
添加到单击的链接并

.siblings().removeClass('active');

此链接将删除应用于同一级别的其他链接上的其他链接类。
我假设您想要这样的链接：

 $(function () {
    $("#user-controls div").first().addClass('active'); // <---add this line
    $("#user-controls").on('click', 'div', function () {
       $(this).addClass('active').siblings().removeClass('active'); //<--and this
       var classToShow = this.id.split('-')[1],
        filter = classToShow === "all" ? 'div' : '.' + classToShow;
        $("#devices").children().show().not(filter).hide();
    });
});

在页面加载之后，
#user controls
中的第一个div（即
all
）应该应用
.active
css类

关于这一点：

$("#user-controls div").first().addClass('active');

然后，如果在其他链接上单击，则在本例中，
.sibbins（）
是有用的函数

$(this).addClass('active').siblings().removeClass('active');

让我们把它分开：

$(this).addClass('active')

此行将类
.active
添加到单击的链接并

.siblings().removeClass('active');

此链接将删除应用于同一级别的其他链接上的其他链接类。
关闭，但我不想显示/隐藏元素。我想应用一个特定的css类（而不是隐藏）。（谢谢！）？只为子孙后代和所有人着想。：）关闭，但我不想显示/隐藏元素。我想应用一个特定的css类（而不是隐藏）。（谢谢！）？只为子孙后代和所有人着想。：）