несколько функций в document.ready функции

Question

вот мой код:

$(document).ready(function() { 

    $('.flip1').click(function() { 
     $('.panel1').slideToggle("slow"); 
    }); 
    $('.flip2').click(function() { 
     $('.panel2').slideToggle("slow"); 
    }); 
    $('.flip3').click(function() { 
     $('.panel3').slideToggle("slow"); 
    }); 
    $('.flip4').click(function() { 
     $('.panel4').slideToggle("slow"); 
    }); 
}); 

Я хочу, чтобы сделать петлю с .flip в качестве переменной (flipVar) и .panel как (panelVar)

Answer 1

Даже если вы хотите запустить селектор в цикле, я бы не сделал этого так, потому что вы делаете несколько вариантов DOM. Вы можете сделать это с выбором один DOM:

$(document).ready(function() { 
    $('div[class^=flip]').each(function (idx) { 
     $(this).click(function() { 
      $('.panel' + (idx + 1)).slideToggle("slow"); 
     }); 
    }); 
}); 

Это будет работать при условии, что flip элементы появляются на странице в их числовом порядке.

Это использует the attribute starts with selector, чтобы получить все <div> элементов, имеющих название класса, начиная с "flip". Измените имя тега, если оно другое, или удалите его, если у них не все те же теги.

Он использует index, который может предоставить вам .each(), чтобы переключить правильный .panel.

Answer 2

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

переменная

for (var i = 1; i <= 4; ++i) $('.flip' + i).click((function(i) { 
    return function() { $('.panel' + i).slideToggle('slow'); }; 
})(i)); 

петля должна быть в ловушке закрытия, так что каждый «щелчок» обработчик ссылается на соответствующее значение. Опять же, я действительно не сделал бы этого так. Я бы добавил, что элементы «flip» совместно используют класс, а затем сохраняют этот индекс (неявная ссылка на соответствующую «панель») в отдельном элементе класса или в атрибуте «data-». Тогда обработчик мог бы найти панель, используя это значение.

редактировать — как хак, вы могли бы использовать тот факт, что имена классов соответствующих элементов являются оба вида «somethingNN», где «NN» является цифровой частью. Вы можете сдирать номер, а затем добавить его в «панель»:

for (var i = 1; i <= 4; ++i) $('.flip' + i).click(function() { 
    var panelClass = this.className.replace(/.*\bflip(\d+).*/, "panel$1"); 
    $(panelClass).slideToggle('slow'); 
}); 

Answer 3

$(document).ready(function() { 

    for (var i=1; i<=4; i++) { 
     (function(i) { 
      $('.flip'+i).click(function() { 
      $('.panel'+i).slideToggle("slow"); 
      }); 
     })(i); 
    } 

}); 

Answer 4

попробовать это:

$(function(){ 
    for(var i=1;i<5;i++){ 
     $('.flip'+i).click(function() { 
      $('.panel'+i).slideToggle("slow"); 
     }); 
    } 
}); 

PS: - не использовать это не будет работать, как указывалось by @patrick