僅在觸發它的元素的子元素上運行JavaScript

-1

我想僅在觸發元素的子元素上運行JavaScript。我試圖做一個研究，但找不到一種方法來得到答案。我知道這可能很簡單，但我是java新手。僅在觸發它的元素的子元素上運行JavaScript

這是我的問題FIDDLE的小提琴。

我想要的是，當我懸停在上面的元素，只有其相應的評級出現，而不是他們兩個。我已經與find（）嘗試沒有成功

$('.product-image').hover(
    function() { 
    $('.product-image').find('.ratings').css('opacity', '1'); 
    }, 
    function() { 
    $('.ratings').css('opacity', '0'); 
    });

謝謝

來源

2017-09-01 Gabriel G

CSS動畫會容易得多。你的問題是你沒有選擇事件中的元素，你再次選擇所有的元素。 – epascarello

您可以使用event.target在你的方法體，這將給觸發hover事件的元素。將它包裝在$()中以使jQuery上下文可用。

$('.product-image').hover(function(event){ 
    $(event.target).next('.ratings').css('opacity', '1'); 
}, function(event){ 
    $(event.target).next('.ratings').css('opacity', '0'); 
});

也更新您的jsfiddle：http://jsfiddle.net/Z33kk/21/

來源

2017-09-01 18:22:30 Zilvinas

我會用「function（e）{$（e.target）.find（'。ratings'）.css ...而不是$（this） –

@MarouenMhiri你是對的，更新我的回答 – Zilvinas

看起來更棒！我會投票支持的;-) –

你的問題是你沒有選擇的元素。您需要更改您的代碼以使用$（this）或$（evt.target）來獲取元素

我該怎麼做？只需CSS

.product-image + .ratings { 
 
    transition: opacity 0.5s ease; 
 
    opacity: 0; 
 
} 
 

 
.product-image:hover + .ratings { 
 
    opacity: 1; 
 
} 
 

 
.product-image { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: red; 
 
    margin-bottom: 10px; 
 
} 
 

 
.ratings { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: blue; 
 
    margin-bottom: 10px; 
 
}

<div class="product"> 
 
    <div class="product-image"></div> 
 
    <div class="ratings"></div> 
 
</div> 
 

 
<div class="product"> 
 
    <div class="product-image"></div> 
 
    <div class="ratings"></div> 
 
</div>

來源

2017-09-01 18:43:11 epascarello

我喜歡這種方式！CSS over JS :) – Zilvinas

謝謝！我正在嘗試使用CSS。 –

僅在觸發它的元素的子元素上運行JavaScript

回答

相關問題