클래스를 사용하여 jquery의 올바른 요소를 참조하는 방법

Question

웹 사이트에 카드가 표시되어 있습니다. 현재 내가 맴돌고있는 카드에 라벨을 표시하고 싶습니다. 나는 특정 카드의 레이블이 나는 카드의 모든에 가져가 때마다 표시되어 있는지 실현 될 때까지

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을 숨기고 있지만 웹 사이트가로드 될 때 레이블을 표시하지 않는 것이 더 좋은 방법입니까?

Answer 1

. 이 방법을 사용해보십시오.

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

Answer 2

당신은 그 이벤트 핸들러 내부의 this 참조를 사용해야합니다, 당신이 보여주고 특정 클래스의 모든 요소를 ​​숨기고 있기 때문이다

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

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