jquery for 루프에 다중 배열 인수를 전달하는 방법

Question

item을 가리킬 때 overlay을 표시하려고합니다.

이 코드 : 그러나

<div class="item" id="item-1"> 
    <div class="overlay" id="overlay-1"></div> 
</div> 
<div class="item" id="item-2"> 
    <div class="overlay" id="overlay-2"></div> 
</div> 

var items=["#item-1","#item-2"]; 
var overlays=["#overlay-1","#overlay-2"]; 
for (var i = 0; i < products.length; i++) { 
    $(items[i]).hover(
    function(){$(overlays[i]).css("visibility", "visible");}, 
    function(){$(overlays[i]).css("visibility", "hidden");}); 
} 

, 그것은 작동하지 않습니다 ... 그것은 overlays[i] 인식 할 수없는 솔기 ...

이유는 무엇입니까?

Answer 1

폐쇄 문제입니다. 호버 인/아웃 기능이 실제로 실행될 때까지 루프는 오래 전에 종료되었으며 i > 2입니다. 당신이 선택하고자하는 오버레이는 범위 지정 문제처럼

var items=["#item-1","#item-2"]; 
var overlays=["#overlay-1","#overlay-2"]; 

function sethover(n) { 
    $(items[n]).hover(
    function(){$(overlays[n]).css("visibility", "visible");}, 
    function(){$(overlays[n]).css("visibility", "hidden");}); 
} 

for (var i = 0; i < items.length; i++) { 
    sethover(i); 
} 

Answer 2

for (var i = 0; i < items.length; i++) { 
    $(items[i]).hover(function(){ 
     $(this).find('.overlay').css("visibility", "visible"); 
    }, function(){ 
     $(this).find('.overlay').css("visibility", "hidden"); 
    }); 
} 

Answer 3

내가이 보인다이

$(".item").hover(function(){ 
    $(this).find(".overlay").show(); 
}); 

Answer 4

같은 것을 할 것 :

은 별도의 핸들러 함수를 추가 범위를 벗어났습니다.

"item"클래스에 마우스를 올리고 "overlay"클래스에 hide/show 로직을 적용하면 항목을 명시 적으로 루프 할 필요가 없습니다. 또한 항목을 숨기고 표시하기 위해 jQuery 친숙한 패턴은 hide 및 show 메서드를 사용하는 것입니다.

$('div.item').hover(function(){ 
    var overlay = $(this).children('div.overlay'); 
    overlay.hide(); 
}); 
overlay.hide(); 
}, 
function(){ 
    var overlay = $(this).children('div.overlay'); 
    overlay.show(); 
}); 

모든 세부 사항을 알지 못한 채로이 방법을 사용하면 원치 않는 깜박임이 발생할 수 있습니다.