jquery顯示/隱藏

Question

我不太擅長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> 

但形象上都來了，還是我有五個所有五個..一些幫助？

Answer 1

嘗試這個。 IMO解決方案更易於理解。

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

Answer 2

你隱藏和顯示所有圖像，你需要使用this關鍵字定位僅當前元素，不是所有的人，這裏是另一個簡單的解決方案使用切換：

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

Answer 3

第二$函數的參數經常用於定義上下文。這意味着，您的選擇器將被用於相對於特定元素或選擇器。

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

考慮到這一點，我們可以修改代碼以當前正在輸入或存在找到合適的圖像.event元素中尋找：

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

這種結合一些邏輯，每一個匹配元素#event .event選擇器。其中每一個都會有一個綁定到他們的mouseenter和mouseleave事件的處理程序。每當您懸停選擇器所匹配的元素之一時，我們都會使用this關鍵字引用該特定元素。

如果在頁面上輸入第一個#event .event元素，則this引用該元素。同樣，如果您退出該元素，則this表示該元素正在退出。回顧這個迴應的第一點，這意味着$("img", this)將針對元素內的每個圖像，從而引發mouseenter或mouseleave事件。

另外，仔細檢查您的使用.hover();這種方法分別有兩個參數，功能，當你的MouseEnter將被調用，當你鼠標離開，：

$("#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(); } 
);