如何在JavaScript中使用數組來匹配事件觸發時的div？

Question

我有一組兩個div - 第一組：當人們將鼠標移到這些div上時，它會觸發一個事件，第二組：當事件被觸發時，這些div將被顯示。 當您將鼠標放在第一組中的div上時，它應該在第二組中顯示其對應的div。我認爲一個簡單的方法來匹配鼠標懸停div與正確的div顯示將使用數組。我已經能夠正確地附加事件監聽器，但我無法弄清楚如何設置它，以便當您將鼠標懸停在數組的一個對象上時，它將顯示具有相同索引編號的數組對象。我認爲，如果我能弄清楚如何識別我所關注的對象的索引號，那麼我就可以實現它的工作。我已經嘗試了很多東西，但一直未能創造出任何有效的東西。下面的代碼：

<script> 
$(document).ready(function(){ 


//create array of divs to mouse over 
var ar = new Array(); 
ar[0] = $("#home"); 
ar[1] = $("#doc"); 

var length = ar.length; 

//create array of divs to display when event is fired 
var des = new Array(); 
des[0] = $("#homeDes"); 
des[1] = $("#docDes"); 


// start for 
for (var i = 0; i< length; ++i) 
{ 
ar[i].bind("mouseover",function(){$(des[i]).css("display","block");}); 
ar[i].bind("mouseout",function(){$(des[i]).css("display","none");}); 
} 
//end for 

}); 
//end 

</script> 

Answer 1

$(document).ready(function(){ 


    //create array of divs to mouse over 
    var ar = new Array(); 
    ar[0] = $("#home"); 
    ar[1] = $("#doc"); 

    var length = ar.length; 

    //create array of divs to display when event is fired 
    var des = new Array(); 
    des[0] = $("#homeDes"); 
    des[1] = $("#docDes"); 


    // start for 
    for (var i = 0; i< length; ++i) 
    { 
     // WRAP THE BODY OF THE FOR LOOP IN A FUNCTION 
     function(index) { 
      ar[index].bind("mouseover",function() { 
       $(des[index]).css("display","block");} 
      ); 
      ar[index].bind("mouseout",function() { 
       $(des[index]).css("display","none"); 
      }); 
     }(i); 
    } 
    //end for 

}); 

當事件被觸發的i值是數組的長度，你要的i值傳遞給另一個函數，以便在每個功能範圍的值index將被調用時的值爲i。

Answer 2

我傾向於對此做出更靈活的方法，以便在更改HTML時不需要更改JavaScript。考慮對需要綁定和提供數據屬性的元素進行分類以指定目標。您的div的HTML是綁定可能是這樣的：

<div id="home" class="mouseoverToggleTrigger" data-target="#homeDes">...</div> 

而jQuery的可能是這樣的：

$(document).ready(function(){ 

    $('.mouseoverToggleTrigger').hover(function() { 
     var $target = $($(this).data('target')); 
     $target.toggle(); 
    } 
}); 

注意這是假設你使用HTML5針對jQuery的，默認情況下，轉換data-*轉化爲可通過data()獲取的值。

對於不屬於HTML5，這個頁面更廣義的解決方案將工作

$(document).ready(function(){ 

    $('.mouseoverToggleTrigger').hover(function() { 
     var $target = $($(this).prop('data-target')); 
     $target.toggle(); 
    } 
}); 

的靈活性，這給了一個額外位，是，你現在不必自己限制在一個對一觸發到目標映射。您可以指定一個類名或其他jQuery選擇器來獲取高度自定義的行爲，例如一個觸發器切換某個類的所有元素，這些元素是另一個類的子元素。

Answer 3

更簡單的方法代碼明智是給予共同的元件共同類，然後使用jQuery index()和eq()匹配配對

HTML

<a id="home" class="hoverMe"> 
<a id="doc" class="hoverMe"> 

<div id="homeDes" class="content"> 
<div id="docDes" class="content"> 

JS

var $content=$('.content') 
var $links=$('.hoverMe').hover(function(){ 
    $content.eq($links.index(this)).show() 

},function(){ 
    $content.eq($links.index(this)).hide() 
}) 

eq() API Docs