如何使用類來引用jquery中的正確元素

我在網站上顯示卡片。我想在我當前徘徊在任何一張卡上顯示標籤。如何使用類來引用jquery中的正確元素

main.js

$('.card').on("mouseover", function() { 
    $('.ui.right.corner.label').show(); 
}); 
$('.card').on("mouseout", function() { 
    $('.ui.right.corner.label').hide(); 
});

這似乎做工精細，直到我意識到，特定存儲卡的標籤顯示每一次我在任何的卡懸停時間。

的index.php

<!--first card--> 
<div class="card" onclick="window.location='product.php';"> 

<img src="img/test1.jpg" class="image"> 
<a class="ui right corner label"> 
    <i class="heart icon"></i> 
</a> 
</div> 

<!--second card--> 
<div class="card" onclick="window.location='product.php';"> 

<img src="img/test2.jpg" class="image"> 
<a class="ui right corner label"> 
    <i class="heart icon"></i> 
</a> 
</div> 

<!--third card--> 
<div class="card" onclick="window.location='product.php';"> 

<img src="img/test3.jpg" class="image"> 
<a class="ui right corner label"> 
    <i class="heart icon"></i> 
</a> 
</div>

我目前已經用Rajaprabhu的回答固定的子元素的問題。但是，標籤現在默認出現在網站上。我正在使用.hide來隱藏它們，但有沒有更好的方法來顯示網站加載時的標籤？

來源

2016-09-18 iWillGetBetter

您可以使用 $（ '卡 '）。在（「鼠標懸停」，函數（）{$ （本）.closest（'。ui.right.corner.label'）。秀（）; }）; （）「mouseout」，function（）{ $（this。）.closest（'。ui.right.corner.label'）。hide（）; }）; –

@Allloush嗨，謝謝你的回答！請參閱下面的兒童，這很好:) – iWillGetBetter

那是因爲你是在顯示和隱藏所有與特定類的元素。試試這個方法。

$('.card').on("mouseover", function() { 
    $(this).children("a").show(); 
}); 
$('.card').on("mouseout", function() { 
    $(this).children("a").hide(); 
});

來源

2016-09-18 10:03:28 user2507

很好的答案！兒童作品高雅！但是，當我刷新頁面時，標籤默認存在。爲什麼這樣？有沒有辦法讓它只在我懸停時才顯示？如果你能幫忙謝謝，那將會很棒！ – iWillGetBetter

你必須使用這些事件處理程序內的this參考，

$('.card').on("mouseover", function() { 
    $('.ui.right.corner.label', this).show(); 
}); 

$('.card').on("mouseout", function() { 
    $('.ui.right.corner.label', this).hide(); 
});

來源

2016-09-18 10:01:27

如何使用類來引用jquery中的正確元素

回答

相關問題