javascript - 使用 Javascript 和 JQuery 创建过滤器按钮

Question

我正在尝试使我的按钮在我的网站上正常工作，但由于某种原因它不起作用。我一直在无休止地工作，需要一些外面的东西。如果您能帮助找出我做错了什么，我将不胜感激。我还在学习 JavaScript 和 JQuery，所以所有这些对我来说都是新的。

• HTML 代码：

    <div id="portfolio">
        <div class="container">
            <div class="row">
                <div class="heading">
                    <h2>PORTFOLIO</h2>
            </div>

        <div class="filter">
            <ul id="filters">
                <li><button class="btn active" data-filter="all">ALL</a></li>
            </ul>
        </div>

        <div class="itemsContainer">
            <ul class="items">
                <li>
                    <div class="item" div class="column apps">
                        <img src="triviastartthumbnail.jpg">
                      <h4>Movie Trivia App</h4>
                      <p>This app was created to test users knowledge on how well they know their movies 
                         and actors/actresses</p>
                    </div>

                    <ul class="img-list">
                        <span class="link">
                            <a href="https://vshorty2003.github.io/movietrivia/"><i class="fa fa-link"> 
                            </i></a></span>
                        <span class="search">
                            <a href="movietriviaappstart.JPG" figcaption="Movie Trivia App" /><i 
                             class="fa fa-search"></i></a>
                                </span>
                        <li class="img-item">
                            <img class='item-img' src="html5-logo.png" alt="HTML icon" />
                        </li>
                        <li class="img-item">
                            <img class='item-img' src="css-3-logo.png" alt="CSS icon"/>
                        </li>
                        <li class="img-item">
                            <img class='item-img' src="js-icon-26.jpg" alt="JavaScript icon" />
                        </li>
                        <li class="img-item">
                            <img class='item-imgjq' src="jquery-icon-16-revised.png" alt="JQuery icon"/>
                        </li>
                    </li>
                </ul>

• CSS 代码：

    /*for filtered buttons*/
        li{
          display: inline;
          list-style: none;
          }

• JavaScript 代码：

   $("button").click(function(){
     $("button").removeClass("btn active");

     $(this).addClass("btn active");

     var dataFilter = $(this).data('filter');

     if(dataFilter == "all") {
         $(".filter ul").show();
     }
     else
     {
       $(".filter ul").hide();
       $("." + dataFilter).show();
     }
   });

标签： javascriptjqueryhtml