使用WordPress供稿的jQuery迭代

我在使用WordPress類別供稿和jQuery構建工作組合時，將鼠標懸停在投資組合示例上時會顯示一些效果。我想迭代使用jQuery和一個WordPress提要，所以這個效果對我的每個投資組合例子都有效......我已經成功地完成了我的投資組合中的第一個例子，但是讓它適用於每個投資組合例子是充滿挑戰的。我瞭解每個投資組合示例都需要一個唯一的標識符，但我不明白如何將其應用於每個示例。請看下面的代碼，謝謝你對我的幫助使用WordPress供稿的jQuery迭代

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; ?>

來源

2013-08-24 cpcdev

使用類選擇

$('.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-24 20:08:38 carter

我一直在試圖說出你所說的並將其應用到......將元素更改爲類，但仍然遇到一些麻煩。你介意將你的示例代碼應用到我的代碼中嗎？我得到，我想要添加一個類的鏈接來顯示它們，但我不知道如何根據我的代碼的結構.. – cpcdev

$（this）是指在上面的代碼示例中的當前選擇器$（ 'div.recentWork'）從那裏你想找到最近的工作區塊內的div.links？我假設你的頁面上有幾個div.recentWork塊？不確定哪些部分重複。如果你發佈多個塊的HTML，我可以幫助更多的選擇器。我只是猜測，因爲我不知道你的PHP將如何呈現。。 – carter

覺得我現在...... $（ 'div.recentWork'）懸停（函數（）{$ （本）.find（ '的imagio。'）淡出（）; $ （本）（）。faindIn（）; }， function（）{（。）imag（）。 '）.fadeOut（）; } ）; – cpcdev

使用WordPress供稿的jQuery迭代

回答

相關問題