Как сжать аналогичные повторяющиеся функции jquery

0

Хорошо, если мои математики верны, мой файл Jquery в 16 раз больше, чем мог бы быть.

Я создаю страницу категорий с вкладками, которая выглядит так.

Tab1

  • cat1
  • cat2
  • и т.д

Таб2

  • cat1
  • cat2
  • и т.д

Все содержимое начинается скрыто, а затем появляется при нажатии кнопки в заголовке категории (также переключение стрелки вверх/вниз).

$("#tabName_contentLink_cat1").click(function(){

    $("#tabName_contentLink_cat1 > .arrow").toggleClass('greyArrow_down')  
                                           .toggleClass('blackArrow_up');
    $("#tabName_content_cat1").slideToggle("fast");

});

Этот код работает нормально, но я повторил его 16 раз!

Единственная часть, которая меняется, - это номер в конце "_cat1".

Как я могу преобразовать этот фрагмент кода, чтобы его можно было повторно использовать 16 раз?

Я новичок, поэтому, пожалуйста, имейте это в виду.

В моей голове; присваивая некоторый искомый уникальный идентификатор (применимый номер категории), собирая его в переменной jQuery onClick и затем вставляя в конце каждого шва _cat'HERE, как путь вперед. Я не знаю, как это осуществить.

благодаря

  • 1
    Google: refactoring extract method
  • 0
    делаю это прямо сейчас!
Показать ещё 2 комментария
Теги:

4 ответа

1
Лучший ответ

вы можете добавить еще один класс ко всем элементам cat, а затем использовать его как селектор или вы можете делать то, что я сделал. Заметьте, я сделал код менее эффективным. И он делает то, что вам нужно, используя функцию.

addClick(cat1);
addClick(cat2);
addClick(cat3);
addClick(cat4);

function addClick(x) {
$("#tabName_contentLink_"+x).click(function(){
    $(this).slideToggle("fast").children(".arrow")
           .toggleClass('greyArrow_down blackArrow_up');
});}
Поделиться
  • 0
    Почти закончил это, но застрял на addClick () ;. буквально понятия не имею, что с этим делать или что это такое. Есть ли термин для этого, который я могу гуглить? Спасибо
  • 0
    addclick - это функция, которую я сделал. И где вы хотели написать cat1, cat2 и т. Д. Вы просто пишете 1,2,3, ... в addClick (1) ... Вы могли бы написать 'addClick (' cat1 ')', но я сделал это так вам даже не нужно писать кота и просто 1,2,3, ...
Показать ещё 11 комментариев
1

Как насчет

$("[id^='tabName_contentLink_cat']").click(function(){

  $(this).children(".arrow").toggleClass('greyArrow_down')  
                            .toggleClass('blackArrow_up');

  var contentId = this.id.replace(/contentLink/, 'content');
  $("#"+ contentId).slideToggle("fast");

});

Это не самый элегантный код, но он должен работать.

Поделиться
0

Почему бы вам не использовать простой цикл?

for(var i = 1; i <= 16; i++){
  $("#tabName_contentLink_cat" + i).click(function(){

      $("#tabName_contentLink_cat" + i + " > .arrow").toggleClass('greyArrow_down')  
                                             .toggleClass('blackArrow_up');
      $("#tabName_content_cat" + 1).slideToggle("fast");

  });
}

Существуют и другие варианты, но это, по-видимому, самый быстрый способ заставить его работать, не меняя слишком много существующего кода. Чтобы сделать его более универсальным, вы можете обернуть его в функцию, которая получает "i" в качестве аргумента.

Поделиться
0

Дайте им весь класс tabName_contentLink, затем:

$(".tabName_contentLink").click(function(){

    $(this).children(".arrow").toggleClass('greyArrow_down')
        .toggleClass('blackArrow_up');
    $(this).find(".tabName_content").slideToggle("fast");

});

Ключевое слово this позволяет вам ссылаться на объект, вызывающий функцию, поэтому относится к определенному объекту из набора. Это может стать немного сложным, но в основном - вы можете использовать его, как описано выше.

Поделиться
  • 0
    Вы заметили, что .slideToggle() не совпадает с элементом .click() ?
  • 0
    Наоборот, я заметил, что это ...
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню