0

この小さな問題に行き詰まり、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 ホバー

 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')
  }
);
4

1 に答える 1

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 ターゲット ' miniwork#id-of-the-post'で

于 2013-10-06T14:31:24.547 に答える