Javascript 如何让jquery切换隐藏/显示功能充当多重筛选？

在我的页面中，我有3个文本作为过滤器，显示/隐藏各自的类

所有项目

项目A

项目B

例如，单击“所有项目”时，所有具有类

项目
的div都将隐藏，并且在“所有项目”文本上显示一条删除线

其他两个选项也是如此

我所面临的逻辑错误是当3与另一个选项组合时，尤其是“所有项”

例如，如果单击“所有项目”，然后单击“项目A”，则会显示“项目A”，但“所有项目”上的删除线仍保留

你可以在下面看到我的代码

如何修复此“逻辑”错误并具有良好的筛选功能


$（“.itemA”）。单击（函数（）{
$（“.itemA item”）.toggle（800）；
$（“.itemA”）.toggleClass（“删除线”）；
});
$（“.itemB”）。单击（函数（）{
$（“.itembitem”）.toggle（800）；
$（“.itemB”）.toggleClass（“删除线”）；
});
$（“.all items”）。单击（函数（）{
$（“.items”）。切换（800）；
$（“.all items”）.toggleClass（“删除线”）；
});
。删除线{
文字装饰：线条贯通；
}

过滤器

所有项目


项目A


项目B

项目
项目A 1



项目B 2



项目A 3



项目B 4

一个简单而干净的解决方案是将所有项目包含在
中，而不是将
项目
类分别应用于每个项目。这样，在打开或关闭某个特定项目组时，如果父元素不可见（通过禁用所有项目），则其子元素也不可见

以下是修改后的版本：


$（“.itemA”）。单击（函数（）{
$（“.itemA item”）.toggle（800）；
$（“.itemA”）.toggleClass（“删除线”）；
});
$（“.itemB”）。单击（函数（）{
$（“.itembitem”）.toggle（800）；
$（“.itemB”）.toggleClass（“删除线”）；
});
$（“.all items”）。单击（函数（）{
$（“.items”）。切换（800）；
$（“.all items”）.toggleClass（“删除线”）；
});
。删除线{
文字装饰：线条贯通；
}

过滤器
所有项目
项目A
项目B
项目
项目A 1



项目B 2



项目A 3



项目B 4

您可以使用一种机制来检查是否存在删除线。如果为真，则应抓住项目A和项目B的功能

您可以使用此更新JS，并检查：

var st_all = false;
$(".itemA").click(function() {
    if(!st_all)
    {
        $(".itemA-item").toggle(800);
        $(".itemA").toggleClass("striketrough-line");
    }
});
$(".itemB").click(function() {
    if(!st_all)
    {
        $(".itemB-item").toggle(800);
        $(".itemB").toggleClass("striketrough-line");
    }
});
$(".all-items").click(function() {
    $(".items").toggle(800);
    $(".all-items").toggleClass("striketrough-line");
    st_all = !st_all; //toggle st_all
    $(".itemA").toggleClass("striketrough-line");
    $(".itemB").toggleClass("striketrough-line");
});

更新：如果单击“所有项目”，您可以使用强制机制强制所有项目罢工。以下是代码，您可以尝试：

var st_all = false, force_st_all = false;
$(".itemA").click(function() {
    if(!st_all)
    {
        $(".itemA-item").toggle(800);
        $(".itemA").toggleClass("striketrough-line");
        force_st_all = true;
    }
});
$(".itemB").click(function() {
    if(!st_all)
    {
        $(".itemB-item").toggle(800);
        $(".itemB").toggleClass("striketrough-line");
        force_st_all = true;
    }
});
$(".all-items").click(function() {
    st_all = !st_all; //toggle st_all
    if (force_st_all) {
      $(".items").hide(800);
      $(".all-items").addClass("striketrough-line");
      $(".itemA").addClass("striketrough-line");
      $(".itemB").addClass("striketrough-line");
      force_st_all = !force_st_all;
    }
    else {
      $(".items").toggle(800);
      $(".all-items").toggleClass("striketrough-line");
      $(".itemA").toggleClass("striketrough-line");
      $(".itemB").toggleClass("striketrough-line");
    }
});

Live link:
很遗憾，这不是一个解决方案，因为它不可扩展。有可能是“对象”和随机排列的“项目”。它也不能解决删除线问题。嗨，这是一个很好的开始。如何处理该场景：单击“项目A”，然后单击“所有项目”？因为在这种情况下，“项目A”将显示。这里是一个活的例子@EnexoOnoma你可能想创建一个打击强制机制，看看我更新的答案，让我看看它是否解决了你的目的。