jquery show/hide

Question

Im는 JavaScript 또는 jQuery에서 좋지 않지만 나는 <div> 요소 위로 마우스를 가져 가면 표시 할 이미지를 얻으려고합니다. 문제는 다른 사람들과도 일어나고 있다는 것입니다.

$(document).ready(function() { 

    $("#event .event").hover(function() { 
     $(".event img").show("slow"); 
    }, 
    $(".event img").mouseout(function() { 
     $(".event img").hide("slow"); 
    })); 

}); 

HTML 코드 :

<div id="event"> 
    <div class="event"> 
     <h4>name1</h4> 

     <p>some text1</p> 
     <img style='position:relative; display:none;' src='img1' alt='' /> 
    </div> 
    <div class="event"> 
     <h4>name2</h4> 

     <p>some text2</p> 
     <img style='position:relative; display:none;' src='img2' alt='' /> 
    </div> 
</div> 

그러나 이미지가 모두오고, 또는 다섯 내가 다섯 가지가 있다면 .. 어떤 도움?

$(document).ready(function(){ 
    $("#event .event").on('mouseenter mouseleave', function() { 
      $('img', this).toggle(e.type=='mouseenter'); 
    }); 
}); 

Answer 1

이 시도. IMO는이 솔루션을 더 쉽게 이해할 수 있습니다.

$(document).ready(function() { 
    $("#event .event").hover(function() { 
     $(this).find('img').show(); 
    }, function(){ 
     $(this).find('img').hide(); 
    }); 
}); 

Answer 2

, 당신은 현재 요소가 아닌 그들 모두를 대상으로 this 키워드를 사용할 필요가 여기에 또 다른 간단한 해결책은 사용 토글 $ 함수의 매개 변수는 종종 컨텍스트를 정의하는 데 사용됩니다. 즉, 선택기는 특정 요소 또는 선택기와 관련하여 사용됩니다.

​$("#event .event").on({ 
    mouseenter: function(){ 
     $("img", this).show(); 
    }, 
    mouseleave: function(){ 
     $("img", this).hide(); 
    } 
});​​​ 

이 일치하는 모든 요소에 약간의 논리를 결합 :

을 염두에두고

$(".event") // finds all .event elements 
$(".event", this) // finds all .event elements within 'this' 

, 우리는 .event 요소 현재 입력 또는 적합한 이미지를 찾기 위해 존재하고 내보고 코드를 수정할 수 있습니다 #event .event 셀렉터. 이들 각각은 mouseenter 및 mouseleave 이벤트에 바인딩 된 처리기를 갖습니다. 선택기와 일치하는 요소 중 하나를 가리킬 때마다 this 키워드를 사용하여 특정 요소를 참조합니다.

페이지에 첫 번째 #event .event 요소를 입력하면 this이 해당 요소를 참조합니다. 마찬가지로 해당 요소를 종료하면 this은 해당 요소가 종료되었음을 나타냅니다. 이 응답의 첫 번째 점을 상기하면 $("img", this)은 요소 내의 모든 이미지를 대상으로 mouseenter 또는 mouseleave 이벤트를 발생시키는 것을 의미합니다.

또한 .hover()의 사용을 다시 확인하십시오. 이 방법을 사용하면 mouseenter 때 호출 될 두 개의 매개 변수 기능을 소요하고 당신이하는 MouseLeave 때, 각각 :

$("#event .event").hover(showImages, hideImages); 

function showImages() { 
    $("img", this).show(); 
} 

function hideImages() { 
    $("img", this).hide(); 
} 

또는 당신은 익명 함수로 .hover 방법 내에서 직접 사람들을 배치 할 수 있습니다 :

$("#event .event").hover(
    function(){ $("img", this).show(); }, 
    function(){ $("img", this).hide(); } 
); 

Answer 3

두 번째 : 당신은 숨어있는 모든 이미지를 표시하고