Javascript后期过滤系统不起作用

Javascript post filtering system not functioning

本文关键字：系统 不起作用 过滤 Javascript      更新时间：2023-09-26

我正试图创建一个简单的过滤系统，将与li的id不同的帖子隐藏在navig类下。为了实现这一点，我循环浏览所有的.article li，并检查它们的id是什么。

示例：

  1. 用id="health"点击li
  2. 第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();
        }
    });
});

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

我可能会在导航li上使用data-article-id属性，如下所示：

例如：实时复制(源(

<!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列表中删除了这些元素。

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

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

第二个问题，id需要是奇异的。它们不能重复。使用数据属性[并且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/

相关文章：