Jquery 创建具有ID的筛选按钮，筛选具有相同ID的rel的元素

这是我的问题。我的网站上有这些过滤按钮，每个按钮都有一个名称，比如“UI、开发、数据库等”

现在，当您只需单击say“TAG_UI”按钮，然后再次单击以停用它时，此代码就可以正常工作。但是当你激活了TAG_UI，然后你也点击了TAG_数据库，发生的是“story_li”元素，但是这两个元素会出现，而这两个元素会隐藏

我真正需要做的是：

• 当您最初单击过滤器按钮时，只有那些关联的 元素将显示，其他所有内容将隐藏
• 当您单击另一个过滤器按钮时，不禁用 第一个，只有这两个相关的元素显示，但一切 其他的东西仍然隐藏着

所以它基本上是一个过滤器。在初始页面加载时，所有内容都会显示，但当您开始单击过滤器按钮时，仅显示与这些按钮关联的元素

我知道这是长篇大论，所以希望这一切都有意义。如果你需要澄清什么，请告诉我

---

提前谢谢

因此，基本上，它似乎归结为关联元素，其rel属性与单击的过滤器匹配，在隐藏和显示之间切换

这应该满足第一次单击时显示的元素的条件，如果单击了第二种类型，则仅显示这两种类型

再次单击过滤器将隐藏关联的元素

$('.tags_list a').on('click', function() {
   $(".story_list li[rel='" + this.id + "']".toggle();
}

---

查看以检查这是否是您想要的？

因此，基本上它似乎归结为关联元素，其rel属性与单击的过滤器匹配，在隐藏和显示之间切换

这应该满足第一次单击时显示的元素的条件，如果单击了第二种类型，则仅显示这两种类型

再次单击过滤器将隐藏关联的元素

$('.tags_list a').on('click', function() {
   $(".story_list li[rel='" + this.id + "']".toggle();
}

---

查看以检查这是否是您想要的？

设计的问题是，您试图用相同的逻辑处理多种类型的状态转换。根据所选按钮集的不同，您有不同的行为：

• 如果未选择“全部”，则过滤器将停用，并显示所有项目
• 如果选择了一个或多个项目，则会激活过滤器并仅显示这些项目

解决此问题的一种方法是检查两种状态，并对每种状态进行适当的转换：

on click:
  figure out the new state for the currently clicked button

  if enabling this button:
    check the previous state for all buttons

    if all buttons were unselected:
      hide all but the currently selected choice
      exit function

    show the filtered items
    exit function

  else (disabling this button):
    check the new state for all buttons

    if all buttons will now be unselected:
      show all but the previously selected choice
      exit function

    hide the filtered items
    exit function

---

您可以使用或

addClass

和

removeClass

方法在按钮本身上存储当前的“isSelected”状态。

设计的问题是，您试图用相同的逻辑处理多种类型的状态转换。根据所选按钮集的不同，您有不同的行为：

• 如果未选择“全部”，则过滤器将停用，并显示所有项目
• 如果选择了一个或多个项目，则会激活过滤器并仅显示这些项目

解决此问题的一种方法是检查两种状态，并对每种状态进行适当的转换：

on click:
  figure out the new state for the currently clicked button

  if enabling this button:
    check the previous state for all buttons

    if all buttons were unselected:
      hide all but the currently selected choice
      exit function

    show the filtered items
    exit function

  else (disabling this button):
    check the new state for all buttons

    if all buttons will now be unselected:
      show all but the previously selected choice
      exit function

    hide the filtered items
    exit function

---

您可以使用或

addClass

和

removeClass

方法在按钮本身上存储当前的“isSelected”状态。

初始化一个全局变量，该变量跟踪按钮是否已被单击，如下所示：

var buttonClicked = false;

$(".tags_list li a").on('click',function() {
    var relid = this.id;
    if(!buttonClicked) {
        $(".story_list li").hide();
        buttonClicked = true;
    }
    $(".story_list li[rel='" + relid + "']").toggle('fast');
    return false;
});

然后，在

回调中，用class
story\u列表隐藏元素中的每个
元素，并跟踪现在已单击的按钮，如下所示：

var buttonClicked = false;

$(".tags_list li a").on('click',function() {
    var relid = this.id;
    if(!buttonClicked) {
        $(".story_list li").hide();
        buttonClicked = true;
    }
    $(".story_list li[rel='" + relid + "']").toggle('fast');
    return false;
});

初始化一个全局变量，该变量跟踪按钮是否已被单击，如下所示：

var buttonClicked = false;

$(".tags_list li a").on('click',function() {
    var relid = this.id;
    if(!buttonClicked) {
        $(".story_list li").hide();
        buttonClicked = true;
    }
    $(".story_list li[rel='" + relid + "']").toggle('fast');
    return false;
});

然后，在
回调中，用class
story\u列表隐藏元素中的每个
元素，并跟踪现在已单击的按钮，如下所示：

var buttonClicked = false;

$(".tags_list li a").on('click',function() {
    var relid = this.id;
    if(!buttonClicked) {
        $(".story_list li").hide();
        buttonClicked = true;
    }
    $(".story_list li[rel='" + relid + "']").toggle('fast');
    return false;
});

在选择和取消选择内容的同时添加一些类将对您有很大帮助，并使您可以对内容进行样式化

像这样的方法应该会奏效：

var list = $(".story_list li");
$(".tags_list li a").on('click',function( event ) {
    event.preventDefault();

    var relid = this.id,
        that = $( this );
    if ( that.is(".selected") ) {
        that.removeClass( "selected" );
        list.filter("[rel='" + relid + "']").removeClass("selected").hide("fast");
    } else {
        list.filter(":not(.selected)[rel!='" + relid + "']")
            .removeClass("selected").hide("fast");
        list.filter("[rel='" + relid + "']")
            .addClass("selected").show("fast");
        that.addClass( "selected" );
    }
    // If nothing selected show everything
    if ( !list.filter(".selected").length ){
        list.show("fast");
    }
});

示例：
在选择和取消选择内容的同时添加一些类将帮助您解决很多问题，并使您能够对内容进行样式化

像这样的方法应该会奏效：

var list = $(".story_list li");
$(".tags_list li a").on('click',function( event ) {
    event.preventDefault();

    var relid = this.id,
        that = $( this );
    if ( that.is(".selected") ) {
        that.removeClass( "selected" );
        list.filter("[rel='" + relid + "']").removeClass("selected").hide("fast");
    } else {
        list.filter(":not(.selected)[rel!='" + relid + "']")
            .removeClass("selected").hide("fast");
        list.filter("[rel='" + relid + "']")
            .addClass("selected").show("fast");
        that.addClass( "selected" );
    }
    // If nothing selected show everything
    if ( !list.filter(".selected").length ){
        list.show("fast");
    }
});

示例：
这里缺少一些东西。
显示的代码在哪里？您的代码只执行一个
.hide（）
，但您说再次单击同一元素可以切换相关的
故事列表
元素。
但是当您激活了标记界面，然后您也单击了标记数据库，会出现“故事”元素，但这两个元素会出现，那两个会隐藏起来。
你能不能修正/澄清这句话的最后一部分？啊，废话。实际上，它应该是切换的。我搞砸了。很抱歉我将进行编辑。
元素没有
rel
属性，对于那些确实存在该属性的元素，它不采用另一个属性的id。如果你想为JS创建你自己的属性，那么就使用HTML5的
data-*
属性，不要滥用有定义意义的东西。这里缺少一些东西。
显示的代码在哪里？您的代码只执行一个
.hide（）
，但您说再次单击同一元素可以切换相关的
故事列表
元素。
但是当您激活了标记界面，然后您也单击了标记数据库，会出现“故事”元素，但这两个元素会出现，那两个会隐藏起来。
你能不能修正/澄清这句话的最后一部分？啊，废话。实际上，它应该是切换的。我搞砸了。很抱歉我将进行编辑。
元素没有
rel
属性，对于那些确实存在该属性的元素，它不采用另一个属性的id。如果你想为JS创建自己的属性，那么就使用HTML5的
data-*
属性，不要滥用具有定义意义的东西。这实际上是我已经拥有的。