创建具有 ID 的过滤器按钮，用于过滤具有相同 ID 的 rel 的元素

Question

这是我的问题。我的网站上有这些过滤按钮，每个按钮都有一个名称，例如“UI、DEVELOPMENT、DATABASE 等”。

<ul class="tags_list">
    <li><a href="#" id="tag_ui">Ui</a></li>
    <li><a href="#" id="tag_database">Database</a></li>
    ...etc
</ul>

然后页面中有一堆元素的 REL 等于其中一个 ID。

<ul class="story_list">
    <li rel="tag_ui"> *SOME CONTENT* </li>
    <li rel="tag_database"> *SOME CONTENT* </li>
    ...etc
</ul>

我目前也有一些 jquery，因此当您单击“tags_list”过滤器按钮之一时，它会切换任何“story_list”元素以隐藏或显示，具体取决于“tags_list”按钮是否被选中或不是。

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

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

我真正需要的是：

• 当您最初单击过滤器按钮时，只有那些关联的 元素会显示，其他一切都会隐藏。
• 当您单击另一个过滤器按钮时，未停用 第一个，只有这两个相关的元素显示，但一切 else 仍然隐藏。

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

我知道这是冗长的，所以希望一切都有意义。如果您需要任何澄清，请告诉我。

提前致谢！

Answer 1

在选择和取消选择事物的同时添加一些类将对您有很大帮助并让您对事物进行样式化。

这样的事情应该可以工作：

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");
    }
});

示例：http://jsfiddle.net/petersendidit/TPjyG/

Answer 2

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

var buttonClicked = false;

然后在您的click 回调中，隐藏具有story_list 类的元素中的每个<li> 元素并跟踪现在已单击按钮，如下所示：

$(".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;
});

Answer 3

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

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

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

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

请参阅http://jsfiddle.net/Ubxuf/ 以检查这是否是您想要的？

Answer 4

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

• 如果全部未选中，则过滤器将停用并显示所有项目
• 如果选择了一个或多个，则过滤器被激活并且只显示那些项目

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

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

您可以使用the jQuery data method 或addClass 和removeClass 方法将当前的“isSelected”状态存储在按钮本身上。