избежать дублирования кода jQuery?

Question

Я новичок в jquery. У меня есть раздел с некоторыми элементами. при нажатии на любой элемент я хочу открыть модальную форму, поэтому вместо создания нескольких модальных форм я создал один модальный, а не используя карусель внутри него, чтобы пройти через предметы.

Теперь, если щелкнуть 10-й элемент, я хочу применить активный класс карусели к 10-му предмету. На данный момент я дал идентификатор всем им и использовал следующий код для каждого элемента. Но это не очень хороший подход.

Я ценю вашу помощь!

Благодаря

 $('.filtr-item .mod1').on('click',function(){ 
 
     $('#menuCarousel').find('.active').removeClass('active'); 
 
     $('.mod1_item').addClass('active'); 
 
     }); 
 

 
     $('.filtr-item .mod2').on('click',function(){ 
 
     $('#menuCarousel').find('.active').removeClass('active'); 
 
     $('.mod2_item').addClass('active'); 
 
     }); 
 

 
     $('.filtr-item .mod3').on('click',function(){ 
 
     $('#menuCarousel').find('.active').removeClass('active'); 
 
     $('.mod3_item').addClass('active'); 
 
     });

Answer 1

Используйте общий класс и добавить данные-атрибут

$('.filtr-item .mod').on('click', function() { // or just $('.filtr-item').on 
 
    $('#menuCarousel').find('.active').removeClass('active'); 
 
    $('.' + $(this).attr("data-mod") + '_item').addClass('active'); 
 
});

.active { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li class="filtr-item"><a class="mod" data-mod="mod1">Activate Mod1</a></li> 
 
    <li class="filtr-item"><a class="mod" data-mod="mod2">Activate Mod2</a></li> 
 
    <li class="filtr-item"><a class="mod" data-mod="mod3">Activate Mod3</a></li> 
 
</ul> 
 

 
<hr/> 
 

 
<div id="menuCarousel"> 
 
    <div class="mod1_item">Mod1</div> 
 
    <div class="mod2_item">Mod2</div> 
 
    <div class="mod3_item">Mod3</div> 
 
</div>

Для более длительного explanati о том, почему использовать $(this).attr("data-mod") вместо $(this).data("mod"), пожалуйста, см комментарии и jQuery Data vs Attr?

---

UPDATE: Если вы не можете изменить HTML, вам нужно будет опрашивать классу

var re = /\bmod(\d+)/; // finds modN 
 
$('.filtr-item a').on('click', function() { 
 
    $('#menuCarousel').find('.active').removeClass('active'); 
 
    var match = this.className.match(re), 
 
    num = (match) ? match[1] : ""; 
 
    if (num) $('.mod' + num + '_item').addClass('active'); 
 
});

.active { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li class="filtr-item"><a class="mod1">Activate Mod1</a></li> 
 
    <li class="filtr-item"><a class="mod2">Activate Mod2</a></li> 
 
    <li class="filtr-item"><a class="mod3">Activate Mod3</a></li> 
 
</ul> 
 
<hr/> 
 
<div id="menuCarousel"> 
 
    <div class="mod1_item">Mod1</div> 
 
    <div class="mod2_item">Mod2</div> 
 
    <div class="mod3_item">Mod3</div> 
 
</div>

Answer 2

Если я не ошибаюсь, вы хотите использовать одну функцию вместо трех различных функций, которые вы используете. вы можете указать собственное поле данных в html, например. data-demo = "mod1".

и использовать следующий код:

$('.filtr-item').on('click',function(){ 
    $('#menuCarousel').find('.active').removeClass('active'); 
    $('.'+$(this).attr('data-demo')+'_item').addClass('active'); 
    }); 

Answer 3

JsFiddle

Без Data mode вы можете попробовать этот способ.

$('.filtr-item').on('click', function() { 
    var num = $(this).prop('class').split(' ')[1].split('mod')[1]; 
    $('#menuCarousel').find('.active').removeClass('active'); 
    var cls = ".mod" + num + '_item'; 
    $(cls).addClass('active'); 
});