同位素在Wordpress中不起作用

时间:2017-10-26 22:03:04

标签: jquery wordpress jquery-isotope isotope

我让它在测试网站上工作,当我访问现场WordPress网站时,它根本无法工作。一切都在页面上正确加载。我确保所有脚本都在我的网站的头部,他们是。我已经尝试了很多东西让它在现场网站上运行但还没有让它工作。我需要在所有帖子加载后加载同位素,所以我认为使用imageLoaded.js可能会有所帮助。我试图使用同位素js加载复选框后过滤帖子。 The site page which I am having the issue on

如果有人能给我一个更好的方法,我会很感激。我会感激所有的帮助。我很难过。

这是同位素定制js:

(function($) {
    $(window).load(function() {
        var $container = $('#expertsPeople'),
            $checkboxes = $('#filters input');

    // if on page with filters
       if ($container.length && $checkboxes.length) {
            $container.imagesLoaded( function(){
                 $container.isotope({
                      itemSelector: '.grid-item',
                      transformsEnabled: false
                 });
             });
            $checkboxes.change(function(){
                 var filters = [];

                 // get checked checkboxes values
                 $checkboxes.filter(':checked').each(function(){
                      filters.push( this.value );
                 });           

                filters = filters.join('');
                $container.isotope({ filter: filters });           

                if(!$container.data('isotope').$filteredAtoms.length){
                       $('#noresults').show();
                 } else {
                       $('#noresults').hide();
                   }       
                 });    

                // reset all filters
               var filterurl = location.search.replace(/^\?/,'').split(/\&/);
                for(var i = 0; i < filterurl.length; i++){
                     var ent = filterurl[i].split(/\=/);
                    if(ent[0].match(/^filter_\d+$/)){
                         $('#' + ent[0]).attr('checked', true);
                    }
                 }        
               $checkboxes.change();

              // reset all filters
             $("#filter-head a").click(function(){
                  $container.isotope({filter: '*'});
                  $checkboxes.filter(':checked').each(function(){
                        $(this).attr('checked', false);
                  });
                 $('#noresults').hide();
                 return false;
             });
         }
    });
})(jQuery);

以下是帖子项目的示例:

<div id="expertsPeople" class="noscript" aria-live="polite" aria-atomic="true">
     <article id="post-44980" class="grid-item experts-box education mathematics">
         <div class="entry-content">....</div>          
   </article>
   <article id="post-44978" class="grid-item experts-box biomedicine-health">
         <div class="entry-content">....</div>
    </article>
</div>

以下是复选框列表的示例:

  <div class="filter-group" data-filter-group="cat8">
        <ul class="experts-tags">
            <li><input type="checkbox" id="agriculture" class="filter-cb" value=".agriculture"><label for="agriculture"> Agriculture</label>
            </li>
         </ul>
   </div>

0 个答案:

没有答案