如何檢測jQuery中每個（）內部的元素？

我試圖能夠懸停在投資組合項目上，但我需要循環使用each（），因爲我需要一些方法來識別每個項目。

我想懸停在.recent工作項顯示.recent-工作item__overlay的.show-沒有類做顯示：無;

既不懸停上，也不在。（「的mouseenter」，函數（）{}）正在工作。

這裏是HMTL：

<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>"> 
<div class="recent-work-item__overlay show-none"> 
<h3 class="color-white bolder-font"><?php the_title(); ?></h3> 
<a href="#" class="color-red">VIEW CASE</a> 
</div> 
<div class="recent-work-img"> 
    <img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait"> 
</div>

這裏是jQuery的：

$.each($('.recent-work-item'), function(){ 

var thisid = $(this).attr("data-portfolio-id"); 
console.log(thisid); 

$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){ 
    $(thisid).find('.recent-work-item__overlay').removeClass('show-none'); 
}); 

$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){ 
    $(thisid).find('.recent-work-item__overlay').addClass('show-none'); 
}); 

});

這不是工作，我不能讓懸停工作我想要做的就是添加或刪除一個類，我不能在每個（）中都這樣做。

我已經在StackOverflow中進行了深入研究，但找不到答案。我會真的感謝任何幫助，我可以得到這一點。

來源

2017-08-06 David Mendienta

'$。每個（$（ '最近的工作項目'）'是錯誤的 – brk

你可以使用'：hover'屬性和移動風格'演出，none'的到'recent-work-item__overlay：hover'。 – Nisarg

@brk爲什麼它錯了？ –

我在codepen測試你的代碼，這個問題你應該使用$(this)不是使用$(thisid)

$.each($('.recent-work-item'), function(){ 

    var thisid = $(this).attr("data-portfolio-id"); 

    $("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){ 
    $(this).find('.recent-work-item__overlay').removeClass('show-none'); 
    }); 

    $("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){ 
    $(this).find('.recent-work-item__overlay').addClass('show-none'); 
    }); 

});

這裏看我的codepen

來源

2017-08-06 05:35:50

非常感謝！ –

不客氣 –

在這裏，我添加了一個例子，說明如何你可以使用CSS來顯示/隱藏元素。它可能不會給你確切的答案，但它會幫助你根據你的需求改變你的樣式表。

基本上，根據評論中的討論，我不認爲你需要JavaScript來設計頁面的方式，你需要它。

.container { 
 
    padding: 10px; 
 
    border: 1px solid gray; 
 
} 
 

 
.container > .hideOnHover { 
 
    display: block; 
 
} 
 

 
.container > .showOnHover { 
 
    display: none; 
 
} 
 

 
.container:hover > .hideOnHover { 
 
    display: none; 
 
} 
 

 
.container:hover > .showOnHover { 
 
    display: block; 
 
}

<div class="container"> 
 
    <div class="hideOnHover"> 
 
    This text will be hidden on hover. 
 
    </div> 
 
    <div class="showOnHover"> 
 
    This text will be shown on hover. 
 
    </div> 
 
</div>

來源

2017-08-06 05:38:56 Nisarg

如何檢測jQuery中每個（）內部的元素？

回答

相關問題