jquery - 使用jquery过滤同时列表时出现的问题

Question

我在使用 jQuery 从投资组合布局中过滤某些内容时遇到一些问题。目前我正在使用 WordPress。这是我打开后的页面:

<div id="portfolio" class="index works">
    <ul id="portfolio-filter" class="horiz-list">
        <li><a ref="all" title="" href="#all" class="current">All</a></li>
        <li><a ref="editorial" title="" href="#editorial" class="">Editorial</a></li>
        <li><a ref="embalagem" title="" href="#embalagem">Embalagem</a></li>
        <li><a ref="identidade-visual-coportativa" title="" href="#identidade-visual-coportativa">Identidade Visual Coportativa</a></li>
        <li><a ref="marketing" title="" href="#marketing">Marketing</a></li>
        <li><a ref="merchandising-e-pdv" title="" href="#merchandising-e-pdv">Merchandising e PDV</a></li>
        <li><a ref="sinalizacao" title="" href="#sinalizacao">Sinalização</a></li>
   </ul>     
   <div id="your_post_here_1" style="float: left;"></div>
   <ul id="portfolio-list" class="horiz-list" linha="1">
        <li class="  even portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="1" postid="817" link="#" rel="prettyPhoto[1266_active]">
                    <img class="thumbnail" src="">
                    <span class="extra" style="display: none; "></span>
                </a>
            </div>
            <div class="entry-title" id="link" style="visibility: visible; top: -124px; ">
               <a href="javascript:void(0)" title="Projeto Verão" rel="bookmark">
                   Projeto Verão
               </a>
            </div>
            <a class="more-link" href="javascript:void(0)" linha="1" postid="817" style="bottom: -40px; "></a>
        </li>
        <li class="  odd portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="1" postid="851" link="#" rel="prettyPhoto[1266_active]">
                   <img class="thumbnail" src="#">
                   <span class="extra"></span>
                </a>
           </div>
           <div class="entry-title" id="link">
               <a href="javascript:void(0)" title="Fixate" rel="bookmark">
                   Fixate
               </a>
           </div>
           <a class="more-link" href="javascript:void(0)" linha="1" postid="851"></a>
        </li>
   </ul>
   <div id="your_post_here_2" style="float: left;"></div>

   <ul id="portfolio-list" class="horiz-list" linha="2">
        <li class="  even portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="2" postid="817" link="#" rel="prettyPhoto[1266_active]">
                    <img class="thumbnail" src="">
                    <span class="extra" style="display: none; "></span>
                </a>
            </div>
            <div class="entry-title" id="link" style="visibility: visible; top: -124px; ">
               <a href="javascript:void(0)" title="Projeto Verão" rel="bookmark">
                   Projeto Verão
               </a>
            </div>
            <a class="more-link" href="javascript:void(0)" linha="2" postid="817" style="bottom: -40px; "></a>
        </li>
        <li class="  odd portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
            <div class="entry-thumb standard" id="portfolio_thumb">
                <a class="thumblink" href="javascript:void(0)" linha="2" postid="851" link="#" rel="prettyPhoto[1266_active]">
                   <img class="thumbnail" src="#">
                   <span class="extra"></span>
                </a>
           </div>
           <div class="entry-title" id="link">
               <a href="javascript:void(0)" title="Fixate" rel="bookmark">
                   Fixate
               </a>
           </div>
           <a class="more-link" href="javascript:void(0)" linha="2" postid="851"></a>
        </li>
   </ul>
   <div id="your_post_here_3" style="float: left;"></div>
</div>

这种情况永远持续下去......

这是 jQuery

(function() {
jQuery.fn.filterable = function(settings) {
    settings = jQuery.extend({
        useHash: true,
        animationSpeed: 1000,
         easingShow: 'easeInCubic',
        easingHide: 'easeOutCubic',
        show: { width: 'show', marginRight: '20px', opacity: 'show' },
        hide: { width: 'hide', marginRight: '0', opacity: 'hide' },
        useTags: true,
        tagSelector: '#portfolio-filter a',
        selectedTagClass: 'current',
        allTag: 'all'
    }, settings);

    return jQuery(this).each(function(){

        /* FILTER: select a tag and filter */
        jQuery(this).bind("filter", function( e, tagToShow ){
            if(settings.useTags){
        jQuery(settings.tagSelector).removeClass(settings.selectedTagClass);
                jQuery(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
            }
            jQuery(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
        });

        /* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
        jQuery(this).bind("filterportfolio", function( e, classToShow ){
            if(classToShow == settings.allTag){
                jQuery(this).trigger("show");
            }else{
                jQuery(this).trigger("show", [ '.' + classToShow ]   );
                jQuery(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );
            }
            if(settings.useHash){
                location.hash = '#' + classToShow;
            }
        });

        /* SHOW: show a single class*/
        jQuery(this).bind("show", function( e, selectorToShow ){
            jQuery(this).children(selectorToShow).each(function() {
                  jQuery(this).animate(settings.show, settings.animationSpeed, settings.easingShow);
                  imagelink = jQuery(this).find('.entry-thumb a');
                  imagelink.attr('rel', imagelink.attr('rel').replace(/(\d)\]/, '$1_active]'));
            });
        });

        /* SHOW: hide a single class*/
        jQuery(this).bind("hide", function( e, selectorToHide ){
            jQuery(this).children(selectorToHide).each(function() {
                  jQuery(this).animate(settings.hide, settings.animationSpeed, settings.easingHide);    
                  imagelink = jQuery(this).find('.entry-thumb a');
                  imagelink.attr('rel', imagelink.attr('rel').replace('_active', ''));
            });
        });

        /* ============ Check URL Hash ====================*/
        if(settings.useHash){
            if(location.hash != '')
                jQuery(this).trigger("filter", [ location.hash ]);
            else
                jQuery(this).trigger("filter", [ '#' + settings.allTag ]);
        }

        /* ============ Setup Tags ====================*/
        if(settings.useTags){
            jQuery(settings.tagSelector).click(function(){
                jQuery('#portfolio-list').trigger("filter", [ jQuery(this).attr('href') ]);

                jQuery(settings.tagSelector).removeClass('current');
                jQuery(this).addClass('current');
            });
        }
    });
}
})(jQuery);


jQuery(document).ready(function(){

jQuery('#portfolio-list').filterable();

});

所以，我的问题是，当我激活过滤器时，它只发生在第一行，我可能在设置页面时犯了一个错误，但奇怪的是，它正在工作!我已经尝试将其改回来，但仍然没有发生...如果有人有建议，我将不胜感激!

简单地说，我想要的就是，有一个带有一些列表的 div，然后进行过滤。 像这样的事情:

<div>
  <ul id="portfolio">
    <li class="booking"></li>
    <li class="code"></li>
    <li class="hash"></li>
  </ul>
  <ul id="portfolio">
    <li class="booking"></li>
    <li class="marketing"></li>
    <li class="booking"></li>
  </ul>
</div>

激活后隐藏那些不属于所选类别的人 选择预订例如:

<div>
  <ul id="portfolio">
    <li class="booking"></li>
  </ul>
<ul id="portfolio">
  <li class="booking"></li>
  <li class="booking"></li>
  </ul>
</div>

不完全是删除，而是在它们上面不显示任何内容。

Answer 1

ID 必须是唯一的。将 id="portfolio-list" 更改为 class="portfolio-list" ，然后使用 $(".portfolio-list").filterable();