Question

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

<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”元素但是这两个元素会出现，而这两个元素会隐藏。

我真正需要做的是：

最初点击过滤器按钮时，只会关联相关按钮元素将显示，其他一切将隐藏。
当您点击另一个过滤器按钮时，不会停用第一个，只有那两个相关元素显示，但一切否则仍然隐藏。

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

我知道这是啰嗦，所以希望一切都有道理。如果您需要澄清任何内容，请告诉我。

提前致谢！

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

所以基本上它似乎归结为关联元素，rel属性匹配过滤器被点击在hide和show之间切换。

这应该满足首次单击时显示的元素的标准，如果单击第二个类型，则仅显示这两种类型。

再次单击过滤器将隐藏相关元素;

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

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

Answer 3

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

var buttonClicked = false;

然后在click回调中，使用类<li>隐藏元素中的每个story_list元素，并跟踪现在点击了一个按钮，如下所示：

$(".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 4

deisgn的问题在于您尝试使用相同的逻辑处理多种类型的状态转换。根据所选按钮的 set ，您有不同的行为：

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

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

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”状态。

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

4 个答案: