Question

一直坚持这个小问题，设法让我的Wordpress循环使用正确的东西......一切正常。我遇到的问题是当我尝试在悬停时针对单个项目。我已经让我的jquery脚本工作，但它针对所有..我知道我必须改变循环但不确定我要做什么..继承我的代码无论如何。如果你们能帮忙的话会很棒..谢谢

Wordpres循环

 <?php $i = 0 ?>
        <?php query_posts('showposts=3'); ?>
        <?php if(have_posts()) : while (have_posts()) : the_post(); ?>
        <?php if( $i == 3 ) : ?>
        <div class="row">
            <?php endif; ?>
                <div class="col-lg-4 col-md-4">
                    <a href="<?php the_permalink(); ?>">
                        <div class="miniwork">
                            <?php 
                                if ( has_post_thumbnail() ) {
                                the_post_thumbnail();
                                } 
                            ?>
                            <figcaption><?php the_title(); ?></figcaption>
                        </div>
                    </a>
                </div>

                <?php $i++ ?>

                <?php endwhile; ?>
            <?php endif; ?>

        </div>

Jquery Hover

 jQuery(".miniwork" ).hover(
  function() {
    jQuery('.miniwork figcaption').addClass('animated tada');
    jQuery('.miniwork figcaption').css('visibility', 'visible');
    var filterVal = 'blur(8px)';
    jQuery('.miniwork img')
      .css('filter',filterVal)
      .css('webkitFilter',filterVal)
      .css('mozFilter',filterVal)
      .css('oFilter',filterVal)
      .css('msFilter',filterVal);
    jQuery('.miniwork figcaption').css('opacity', '0.95')
  }, function() {
    jQuery('.miniwork figcaption').removeClass('animated tada');
    jQuery('.miniwork figcaption').css('visibility', 'hidden');
    jQuery('.miniwork figcaption').css('visibility', 'hidden');
    var filterVal = 'blur(0px)';
    jQuery('.miniwork img')
      .css('filter',filterVal)
      .css('webkitFilter',filterVal)
      .css('mozFilter',filterVal)
      .css('oFilter',filterVal)
      .css('msFilter',filterVal);
      jQuery('.miniwork figcaption').css('opacity', '0')
  }
);

Answer 1

您定位的是分配给每个div的类"miniwork" ..您也可以将#id分配给每个div -

<div class="miniwork" id="<?php echo get_the_ID(); ?>">
    <?php 
        if ( has_post_thumbnail() ) {
        the_post_thumbnail();
        } 
    ?>
    <figcaption><?php the_title(); ?></figcaption>
</div>

现在在jQuery taget'miniwork#id-of-the-post'

Wordpress循环目标单个项目悬停

1 个答案: