Question

我正在尝试创建一个简单的过滤系统，用于隐藏与li类下的navig不具有相同ID的帖子。为了实现这一点，我循环遍历所有.article li并检查他们的id是什么。

示例：

使用li

id="health"

第2条消失

谢谢！

HTML：

<ul class="navig">
    <li id="health">Health</li>
    <li id="ASD">ASD</li>
</ul>

<br>

<ul class="article">
    <li id="health">Article 1</li> <br>
    <li id="ASD">Article 2</li> <br>
    <li id="health">Article 3</li> 
</ul>

使用Javascript：

$('.navig li').onclick(function () {
    $id = this.id;
    $('.article li').each(function() {
        if ($id != this.id) {
            $('.article li').hide();
        }
    });
});

Answer 1

$('.navig li').onclick(function () {  <-- not valid jquery

jQuery中没有onclick方法......有.click(function(){})或on("click", function(){})

第二个问题，ids需要单数。他们不能重演。使用数据属性[并且br不能是ul的孩子]

<ul class="navig">
    <li id="health">Health</li>
    <li id="ASD">ASD</li>
</ul>

<br>

<ul class="article">
    <li data-id="health">Article 1</li> 
    <li data-id="ASD">Article 2</li>
    <li data-id="health">Article 3</li> 
</ul>

和脚本

$('.navig li').on("click", function() {
   var id = this.id;
   $(".article li").hide().filter('[data-id="' + id + '"]').show();
});

JSFiddle：http://jsfiddle.net/q8SCF/

Answer 2

根本问题是您的HTML无效。您不能在多个元素上使用相同的id值。另外，您已使用onclick您想要使用click的位置。

我可能会在导航data-article-id上使用li属性，而不是这样：

例如：Live copy（source）

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Testing</title>
</head>
<body>
  <ul class="navig">
    <li data-article-id="health">Health</li>
    <li data-article-id="ASD">ASD</li>
  </ul>

  <br>

  <ul class="article">
    <li id="health">Health Article</li>
    <li id="ASD">ASD Article</li>
  </ul>

  <script>

    $('.navig li').click(function () {
      var articleId = $(this).attr("data-article-id");
      alert(articleId);
      var articles = $(".article li");
      articles.not("#" + articleId).hide();
      $("#" + articleId).show();
    });
  </script>
</body>
</html>

您希望在页面加载等时隐藏文章（或显示默认文章）;我会把它作为锻炼给你。： - ）

附注：br元素不能是ul元素的子元素，我已从articles列表中删除了元素。

Javascript后期过滤系统无法正常运行

2 个答案: