1

我正在使用 WordPress 类别提要和 jQuery 构建一个工作组合，以在您将鼠标悬停在组合示例上时显示一些效果。我想使用 jQuery 和 WordPress 提要进行迭代，以便效果适用于我的每个投资组合示例......我已经成功地为我的投资组合中的第一个示例完成了此操作，但是让它在每个投资组合示例中工作证明是具有挑战性的。我了解每个投资组合示例都需要一个唯一标识符，但我不知道如何将其应用于每个示例。请看下面的代码谢谢你帮助我

JS：

$(document).ready(function() {
  $('div.recentWork').hover(function(){
     $(".links").stop(1).slideDown();
         $(".imagio").fadeOut();
  },function(){
     $(".links").stop(1).slideUp();
         $(".imagio").fadeIn();
  });
});

PHP：

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

    <?php

    if(has_post_thumbnail($post->ID)){
        $thumbsrc = get_the_post_thumbnail($post->ID,'medium');
    }else{
        $thumbsrc = "<img src=\"images/no_featured_image.jpg\" style=\"width:100%;height:180px;\">";
    }

    $url = get_post_meta($post->ID, "URL", true);
    $website = get_post_meta($post->ID, "Website", true);      

    ?>

    <div class="recentWork">

        <div class="links">
        <a href="<?php echo $website; ?>" target="_blank"><img src="<?php bloginfo('url'); ?>/images/icons/icon_zoom.png" /></a><a href="<?php echo $website; ?>"><img src="<?php bloginfo('url'); ?>/images/icons/icon_more.png" /></a><br />
        <?php the_title(); ?>
        </div>

        <div class="imagio">
        <?php echo $thumbsrc; ?>
        </div>

    </div>

<?php endwhile; ?>
4

1 回答 1

1

使用类选择器

$('.className')

或节点选择器

$('div')

或两者

$('div.className')

然后在悬停处理程序中，使用

$(这个)

例如 

$(document).ready(function() {
  $('div.recentWork').hover( 
    function(){ 
      $(this).find('.imagio').fadeOut(); 
      $(this).find('.showLinks').fadeIn(); 
    }, 
    function(){ 
      $(this).find('.imagio').fadeIn(); 
      $(this).find('.showLinks').fadeOut(); 
    } 
  );
});
于 2013-08-24T20:08:38.837 回答