Как можно оптимизировать данный код?

Question

[Misha_mishy1]

Как оптимизировать такой код?
Знаю, что как-то можно не писать кучу классов и id, а использовать переменную this.
Однако, когда я попробовал через нее сделать, то у меня по нажатию на любое место срабатывает функция.

$(document).ready(function(){

    $( ".slideToggle-1" ).click(function(){        
      $(".toggle__content-1").slideToggle(); 
    });

    $( ".slideToggle-2" ).click(function(){        
      $(".toggle__content-2").slideToggle(); 
    });

    $( ".slideToggle-3" ).click(function(){
      $(".toggle__content-3").slideToggle(); 
    });

    $( ".slideToggle-4" ).click(function(){        
      $(".toggle__content-4").slideToggle(); 
    });

Comments

[Лев Забудкин]

$(document).ready(function(){
 for (var i = 1; i < 5; i++) {
    $( ".slideToggle-" + i ).click(function(){        
      $(".toggle__content-" + i).slideToggle(); 
    });
 }
}

Answer 1

[Rustam Bainazarov]

Общие классы или data-атрибуты добавить нельзя им всем?

Ну а так — что-то наподобие этого как вариант:

$('[class*="slideToggle-"]').on( "click", function() {
  $(this).find('[class*="toggle__content-"]').slideToggle(); 
});

Comments

[Misha_mishy1]

Спасибо большое!

Answer 2

[Лев Забудкин]

$(document).ready(function(){
 for (var i = 1; i < 5; i++) {
    $( ".slideToggle-" + i ).click(function(){        
      $(".toggle__content-" + i).slideToggle(); 
    });
 }
}

Answer 3

[krka92]

Если у тебя slideToggle-1, slideToggle-2 и т.д. - это одно и то же, тогда вот так

$( ".slideToggle" ).click(function() {
  $(this).slideToggle(); 
}

Comments

[Misha_mishy1]

Спасибо!