Как сконденсировать подобные дублирующие функции jquery

Ну, если мои математические данные верны, мой файл Jquery в 16 раз больше, чем может быть.Как сконденсировать подобные дублирующие функции jquery

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

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, как путь вперед. Я не знаю, как это осуществить.

Благодаря

источник

2013-12-08 user2950370

google: 'рефакторинг экстракт метод' – reto

сделав это прямо сейчас! – user2950370

Используйте классы вместо ids, а затем связывайте элементы друг с другом с помощью методов обхода DOM, таких как '.find()' и '.closest()'. – nnnnnn

вы можете добавить еще один класс ко всем элементам 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'); 
});}

источник

2013-12-08 20:46:24

Почти закончил это, но застрял на addClick() ;. буквально понятия не имею, что с ним делать или что это такое. Есть ли термин для этого, который я могу сделать Google? спасибо – user2950370

addclick - это функция, которую я создал. И где вы хотели написать cat1, cat2 и т. Д. Вы просто пишете 1,2,3, ... в addClick (1) ... Вы могли бы написать 'addClick (' cat1 ')', но я сделал это так вам даже не нужно писать кошку и просто 1,2,3, ... –

Ваш синтаксис выглядит великолепно, но у меня все еще возникают проблемы с его реализацией. Что вы думаете об этой скрипке? Http: //jsfiddle.net/Bundaberg/7cVwe/4/ – user2950370

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

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

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

});

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

источник

2013-12-08 20:38:17 JNF

Вы заметили, что '.slideToggle()' не принадлежит к тому же элементу, что и '.click()'? – nnnnnn

Напротив, я заметил, что это ... – JNF

Но в коде OP идентификаторы элементов различны. – nnnnnn

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

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» в качестве аргумента.

источник

2013-12-08 20:53:41 nmat

насчет

$("[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"); 

});

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

источник

2013-12-08 21:45:34 MarcoL

Как сконденсировать подобные дублирующие функции jquery

ответ

Смежные вопросы