Как петля в jQuery

Question

У меня есть пара функций jQuery с похожим синтаксисом.

$("#item-1").hover(function(){ 
    $(".item-1").animate({opacity:1},"slow"); 
},function(){ 
    $(".item-1").animate({opacity:0},"slow"); 
}); 

$("#item-2").hover(function(){ 
    $(".item-2").animate({opacity:1},"slow"); 
},function(){ 
    $(".item-2").animate({opacity:0},"slow"); 
}); 

$("#item-3").hover(function(){ 
    $(".item-3").animate({opacity:1},"slow"); 
},function(){ 
    $(".item-3").animate({opacity:0},"slow"); 
}); 

Мой вопрос в том, как сократить мой код с помощью цикла. Я попытался следующие, но это не сработало:

for (i = 1; i <= 3; ++i) { 

    $("#item-" + i).hover(function(){ 
    $(".item-" + i).animate({opacity:1},"slow"); 
    },function(){ 
    $(".item-" + i).animate({opacity:0},"slow"); 
    }); 

} 

Answer 1

Это должно работать:

for (i = 1; i <= 3; ++i) { 
    (function(index){ 
    $("#item-" + index).hover(function(){ 
     $(".item-" + index).animate({opacity:1},"slow"); 
    },function(){ 
     $(".item-" + index).animate({opacity:0},"slow"); 
    }); 
    })(i); 
} 

Проблемы с циклом является то, что переменный я не захвачена функцией парения. При этом переменная i будет захвачена должным образом.

Answer 2

Положите универсальный класс item ко всем элементам, а затем просто вызвать функцию для всех элементов:

$(".item").hover(function(){ 
    $(this).animate({opacity:1},"slow"); 
},function(){ 
    $(this).animate({opacity:0},"slow"); 
}); 

Answer 3

попробовать может работать для вас

$("#item-1, #item-2, #item-3").hover(function(){ 
    $(this).animate({opacity:1},"slow"); 
},function(){ 
    $(this).animate({opacity:0},"slow"); 
}); 

Answer 4

добавить класс к вашему пункту, чтобы выбрать их, и сделать это

$(".item").hover(function(){ 
    $(this).animate({opacity:1},"slow"); 
    },function(){ 
    $(this).animate({opacity:0},"slow"); 
    }); 

Answer 5

Вы могли бы вы селектор JQuery в attributeStartsWith

Описание: Выбор элементов, которые имеют указанный атрибут со значением , начиная именно с данной строкой.

Ниже будет работать, если у вас есть классы .item-х элементов:

$('[id^="item-"]').hover(function(){ 
    $("."+this.id).animate({opacity:1},"slow"); 
},function(){ 
    $("."+this.id).animate({opacity:0},"slow"); 
}); 

В противном случае в моем предложении вы могли бы сделать это:

$('[id^="item-"]').hover(function(){ 
    $(this).animate({opacity:1},"slow"); 
},function(){ 
    $(this).animate({opacity:0},"slow"); 
}); 

Answer 6

Если ваш HTML похож на ниже,

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

Вместо id использовать класс

$(".item-class").hover(function(){ 
    $(this).find('.item-sub-class').animate({opacity:1},"slow"); 
},function(){ 
    $(this).find('.item-sub-class').animate({opacity:0},"slow"); 
});