<div class="container">
<div class="item">
<div class="size">
<p>Size</p>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<img src="img/%EC%85%94%EC%B8%A01-removebg-preview.png">
</div>
<div class="item">
<div class="size">
<p>Size</p>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<img src="img/%EC%85%94%EC%B8%A01-removebg-preview.png">
</div>
</div>
<script>
$('.item').mouseover(function() {
$('img').css('opacity', '0.3')
$('.size').css('display', 'block')
})
$('.item').mouseleave(function() {
$('img').css('opacity', '1')
$('.size').css('display', 'none')
})
</script>
지금이게 제 코드인데 문제는 각각 이미지에 클래스나 아이디를 부여를 안한 상태로 A라는 이미지에 이벤트를 발생시키면 B라는 이미지에도 이벤트가 적용이 됩니다.
이미지에 각각 클래스나 아이디를 부여하면 되긴 하겠지만 뭔가 하드코딩하고 있는 듯한 느낌이라서
이럴 때 어떤 방법으로 해결해야할까요?
한마디로 내가 클릭한 이미지에만 이벤트가 적용이 됐으면 좋겠습니다. e.target 이런걸로 if문 돌려야하나요?
