0

我在一个网站上工作，我正在尝试使用 Isotope (http://isotope.metafizzy.co/docs/filtering.html) 在我的分类页面上过滤/排序帖子。但是由于某种原因，无论我做什么，我都无法使其工作。我需要一些紧急帮助。这是我的编码的样子 - 首先我在我的主题functions.php中有这个来生成类别列表

function isotope_categories() {

        $terms = get_terms('videoscategory');

        $html = '<ul class="filters option-set" data-option-key="filter">';
        $html .= '<li><a href="#" data-option-value="*" class="selected">All items</a></li>';

        foreach ($terms as $term) {


            $html .= "<li><a href='#filter' data-filter='.boxes {$term->name}'>{$term->name}</a></li>";   
        }

        $html .= '</ul>';

        echo $html;
    }

然后在我的分类页面上，我这样称呼它-

<nav id="options" class="option-set filter" data-option-key="filter">                       
    <?php isotope_categories() ?>
</nav>

类别链接已生成，但它们的功能不像预期的那样。这是我的页面循环 -

<div id="content">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


 <?php $terms = get_the_terms( $post->ID, 'videoscategory' ); ?>


<div class="boxes <?php foreach( $terms as $term ) echo ' ' . $term->name; ?>" style="width:100%; float:left; border-top:1px solid #ccc; margin-top:10px;">

// MY POST CONTENT AND DIVS

</div>
<?php endwhile; else: ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php endif; ?>
<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>
</div>

而它下面的js—— 

<script type="text/javascript">
   jQuery(document).ready(function(){
     var mycontainer = jQuery('#content');
     mycontainer.isotope({
     itemSelector: '.boxes'
     });

   // filter items when filter link is clicked
jQuery('#options a').click(function(){
  var selector = jQuery(this).attr('data-filter');
  mycontainer.isotope({ filter: selector });
  return false;  
  });

});
 </script>

我根本无法让它工作，我尝试了几种方法让它工作，但我想我错过了一些东西或者只是做错了。我必须修复或更改什么才能使过滤起作用？

很感谢任何形式的帮助。谢谢。

编辑：

通过使用 chrome 调试控制台，我能够看到这个错误 - Uncaught TypeError: Object [object Object] has no method 'isotope' - 我不确定它的含义。

4

1 回答 1

0

好的，我能够让它工作和过滤，除了我还需要做一些事情才能让它按照我想要的方式工作。就它的功能而言，我确实设法让它工作。万一其他人感兴趣-这就是我所做的

  1. 首先我检查了我的主题functions.php和我的标题以确保包含最新的jquery并且包含正确的脚本，我还确保它没有被多次包含并且它们的顺序正确（首先是jquery脚本，然后是同位素脚本。）

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/lib/jquery.isotope.min.js'></script>

  2. 接下来，我确保同位素的 CSS 在我的样式表中。

    .isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

  3. 之后，我在过滤器列表的函数中编辑了代码（您可以在我的问题中看到原始代码）

        function isotope_categories() {

    $terms = get_terms('videoscategory');

    $html = '<ul id="options">';
    $html .= '<li><a href="#" data-option-value="*" data-filter="*" class="selected">All items</a></li>';

    foreach ($terms as $term) {


        $html .= "<li><a href='#' data-filter='.{$term->slug}' class='current'>{$term->name}</a></li>";   
    }

    $html .= '</ul>';

    echo $html;
}

  4. 接下来，我更改了循环的编码-

       <div id="content" style="width: 94%;">
   <div id="isocontent">
   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   <?php $terms = get_the_terms( $post->ID, 'videoscategory' ); ?>

   <div class="box<?php foreach( $terms as $term ) echo ' ' . $term->slug; ?>" style="width:100%; float:left; border-top:1px solid #ccc; margin-top:10px;">

   //MY DIVS AND CONTENT

   </div>

   <?php endwhile; else: ?>

   <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

   <?php endif; ?>
   <div style="position:absolute;">
   <?php if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);
   } ?>
   </div></div></div>

  5. 然后我编辑了它下面的javascript代码-

       <script type="text/javascript">
   $(document).ready(function(){
   var mycontainer = $('#isocontent');
 mycontainer.isotope({
 itemSelector: '.box'
 });

   // filter items when filter link is clicked
   $('#options a').click(function(){
   var selector = jQuery(this).attr('data-filter');
   mycontainer.isotope({ filter: selector });
   return false;  
   });

   });
   </script>

做完这一切之后，我终于能够让同位素发挥作用。我还有一些事情要解决，以便我可以让它完全按照我想要的方式工作，但就让它正常运行而言，这对我有用。

于 2012-12-21T06:54:19.530 回答