Question

我只是一名平面设计专业的学生，我几乎不知道编码或javascript。

在我的网站上，我有一个带有固定位置的左侧导航栏的水平滚动。我想过滤不同类别的所有项目。例如，当我点击＆＃34; Branding＆＃34;所有品牌项目都会出现，所有其他项目都会消失。

我尝试了不同的选项，但没有一个可行。当我点击过滤器时，它没有做任何事情。我不知道我的HTML或脚本是否有问题。请帮我。我用过这种网站改变了jQuery： queness.com以下是我的所有HTML和所有内容。

https://jsfiddle.net/PaulinaPaulino/hbk8z161/

    <body>
    <nav class="fixed-nav-bar">

    <li>
      <div id="home">
        <a href="index.html">Paulina Paulino</a>
      </div>
    </li>


    <li><a href="javascript:;" class="filter active" data-filter="branding editorial infographics photography poster typography">All</a></li>
    <li><a href="javascript:;" data-filter="branding" class="filter">Branding</a></li>
    <li><a href="javascript:;" data-filter="editorial" class="filter">Editorial</a></li>
    <li><a href="javascript:;" data-filter="infographics" class="filter">Infographics</a></li>
    <li><a href="javascript:;" data-filter="photography" class="filter">Photography</a></li>
    <li><a href="javascript:;" data-filter="poster" class="filter">Poster</a></li>
    <li><a href="javascript:;" data-filter="typography" class="filter">Typography</a></li>


    <li>
      <div id="about">
        <a href="pages/about /about.html">About</a>
      </div>
    </li>

    <li>
      <div id="contact">
        —paulinapaulino9@gmail.com
        <div class="icons">
          <a target="_blank" href="https://twitter.com/PaulinaPaulino9"><img src="icons/twitter.png" alt="twitter" style="height:40px;"></a>
          <a target="_blank" href="https://www.instagram.com/paulinapaulino/">    <img src="icons/instagram.png" alt="instagram" style="height:40px;"></a>
          <a target="_blank" href="https://www.linkedin.com/in/paulina-paulino-94b29490"><img src="icons/linkedIn.png" alt="linkedinprofile" style="height:40px;"></a>
          <a target="_blank" href="Resume.pdf"><img src="icons/resume.png" alt="resume" style="height:35px;"></a>
        </div>
      </div>
    </li>
    </nav>


    <div id="portfoliolist">

    <div class="panel" data-cat="photography">
      <div class="project1">
        <a href="####"><img src="pages/projects/p1-Paint/_MG_8797.jpg" alt="couple-covered-in-paint" style="height:590px;">
          <p>Paint</p>
        </a>
      </div>
    </div>

    <div class="panel" data-cat="infographics">
      <div class="project2">
        <a href="###"><img src="pages/projects/p2-Online-Affairs-Infographic/01-front-top.png" alt="infographic" style="height:590px;">
          <p>Online Affairs Infographic</p>
        </a>
      </div>
    </div>

    <div id="project3" class="panel">
    </div>

    <div id="project4" class="panel">
    </div>

   </div>


  <script>
    $(function() {

      var filterList = {

        init: function() {

          // MixItUp plugin
          // http://mixitup.io
          $('#portfoliolist').mixitup({
            targetSelector: '.panel',
            filterSelector: '.filter',
            effects: ['fade'],
            easing: 'snap',
            // call the hover effect
            onMixEnd: filterList.hoverEffect()
          });

        },

        hoverEffect: function() {

          // Simple parallax effect
          $('#portfoliolist .portfolio').hover(
            function() {
              $(this).find('.label').stop().animate({
                bottom: 0
              }, 200, 'easeOutQuad');
              $(this).find('img').stop().animate({
                top: -30
              }, 500, 'easeOutQuad');
            },
            function() {
              $(this).find('.label').stop().animate({
                bottom: -40
              }, 200, 'easeInQuad');
              $(this).find('img').stop().animate({
                top: 0
              }, 300, 'easeOutQuad');
            }
          );

        }
      };

      // Run the show!
      filterList.init();

    });

  </script>


</body>

Answer 1

我只需要从下面的链接中应用此过滤器jQuery所做的一切。

http://www.newmediacampaigns.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours

水平滚动网站上的投资组合过滤器无效

1 个答案: