jQuery - сделать простой длинный код коротким (думаю, зацикливание)?

Question

У меня есть такой код:

 $("#item-1").hover(function(e) { 
        e.preventDefault();   
        $("#item-text").stop().animate({marginLeft: "0px"});
        $("#item-1-image").animate({opacity: 1});
    })  

 $("#item-1").mouseout(function() {
    $("#item-1-image").animate({opacity: 0});
 }) 

Я должен повторить это ровно 10 раз, заменив все «предмет-1» на «предмет-2», «предмет-3» и т. Д.

Как это сделать?

[править]

Какой самый лучший / самый короткий путь - потому что на самом деле я знаю, как заставить его работать, но это не элегантный способ;)

Answer 1

Событие наведения должно нормально обрабатывать события окончания и окончания.Если вы застряли с этими идентификаторами, вы можете использовать ^= для выбора идентификаторов, которые начинаются с "item -".

$("div[id^='#item-']").hover(
    function(e) { 
        e.preventDefault();
        $(this).find("p").stop().animate({marginLeft: "0px"});
        $(this).find("img").animate({opacity: 1});
    }, 
    function() {
        $(this).find("img").animate({opacity: 0});
    }
);

Вам лучше использовать один класс CSS, так как этих селекторов будет многос ним легче работать.

Answer 2

Вы не должны делать hover() и mouseout().

Метод .hover() принимает 2 функции, представляющие mouseenter и mouseleave.

Дайте элементам общий класс, затем извлеките число из идентификатора

$(".someClass").hover(function(e) { 
      var num = this.id.split('-').pop();
      e.preventDefault();   
      $("#item-text").stop().animate({marginLeft: "0px"});
      $("#item-" + num + "-image").animate({opacity: 1});
 }, function() {
      var num = this.id.split('-').pop();
      $("#item-" + num + "-image").animate({opacity: 0});
 });

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

for(var i = 1; i < 11; i++) {

    (function( num ) {
        $("item-" + i).hover(function(e) { 
              e.preventDefault();   
              $("#item-text").stop().animate({marginLeft: "0px"});
              $("#item-" + num + "-image").animate({opacity: 1});
         }, function() {
              $("#item-" + num + "-image").animate({opacity: 0});
         });
    })( i );

}

Answer 3

$(".item").hover(function(e) {  
      e.preventDefault();   
    $("#item-text").stop().animate({marginLeft: "0px"});
    $(".itemImage[number='"+$(this).attr("number")+"']").animate({opacity: 1});
},function() {
    $(".itemImage[number='"+$(this).attr("number")+"']").animate({opacity: 0});
});

1. Использовать указатель мыши для обоих событий
2. Использовать классы и атрибут, без идентификаторов с числами

Answer 4

for (var i=1;i<11;i++)
{
 $("#item-"+i).hover(function(e) { 
        e.preventDefault();   
        $("#item-text").stop().animate({marginLeft: "0px"});
        $("#item-"+i+"-image").animate({opacity: 1});
    })  

 $("#item-"+i).mouseout(function() {
    $("#item-"+i+"-image").animate({opacity: 0});
 }) 
}

Answer 5

for (var i=1;i<=10;++i){
  $('#item-'+i).hover(...).mouseout(...);
}

Answer 6

Вы можете использовать обычный javascript для каждого цикла.

for (var i = 1; i <= 10; i++) {
    $("#item-" + i).hover( ...
}