Блог

Главная - Вопросы по программированию - как передать аргументы из нескольких массивов в jquery для цикла

как передать аргументы из нескольких массивов в jquery для цикла

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я хочу показывать свои overlay s при наведении курсора item мыши на s.

Это код:

 <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] не могут быть распознаны…

почему?

Ответ №1:

Я бы сделал что-то вроде этого

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

Ответ №2:

Похоже, что это проблема с областью видимости, когда наложения, которые вы пытаетесь выбрать, выходят за рамки.

Вы могли бы полностью устранить необходимость явного перебора элементов, просто применив наведение курсора к классу «item» и логику скрытия / отображения к классу «overlay». Кроме того, для скрытия и отображения элементов дружественный шаблон 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();
});

Не зная всех деталей, вы должны знать, что такой подход может привести к нежелательному мерцанию.

Ответ №3:

Это проблема закрытия. К тому времени, когда функции ввода / вывода при наведении курсора фактически выполняются, цикл уже давно завершен, и 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);
}

Ответ №4:

 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");
    });
}
Метки: