如何使用JQuery .each（）遍歷47個div？

我基本瞭解.each（）如何基於jquery文檔中的內容工作，但我並不真正瞭解如何將其應用於具有大量元素的內容。我有使用SVG製作的地圖。當前地圖的每個部分都在onmouseover功能上亮起。如何使用JQuery .each（）遍歷47個div？

 $('.shape').mouseover(function(){ 
    // $('.shape').css({fill:#5df8b8;}) 
    shape_id = $(this).attr('id'); 
    console.log($(shape_id)); 
    $("#" + shape_id).css("fill", "#5df8b8"); 
    $('.hidden').each(function(i){ 
     //show each div on hover over 
    }); 


    }); 
    $('.shape').mouseleave(function(){ 
    console.log("you left a zip"); 
    $('.shape').css("fill", "white"); 
    $('.hidden').hide(); 
    });

我爲地圖的每個部分都有一個div。每個div都包含該區域的信息。我希望能夠使每個div顯示取決於你在地圖上懸停的地方是否有比這個情況下的.each（）更好的東西？

來源

2013-05-12 cdm89

你有沒有辦法找出'.hidden'元素與當前徘徊的'.shape'元素相關，就像某個類，相同的索引等？ – adeneo 2013-05-12 15:27:42

@adeneo我不太確定你的意思，但每個div都有自己的id和隱藏的類。 svg元素也有相同的id，divs有 – cdm89 2013-05-12 15:40:46

@ user2302869更好的是提供一個示例HTML模板在小提琴 – exexzian 2013-05-12 15:41:50

對mouseover和mouseleave事件中元素的「this」引用指的是觸發事件的div。你可以使用它而不必遍歷地圖中的所有div。見下面的代碼。我創建了一個示例fiddle，這是一個工作示例。

<div class="transparent"><img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" /></div> 
<div class="transparent"><img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" /></div> 
<div class="transparent"><img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" /></div> 


$("div").bind("mouseover", function(el, a){ 
$(this).removeClass("transparent") 
}) 
.bind("mouseleave", function(el, a){ 
$(this).addClass("transparent") 
})

來源

2013-05-12 19:18:53 sriniris

如何使用JQuery .each（）遍歷47個div？

回答

相關問題