avoid duplicated jQuery code?

Question

I am a novice to jquery. I have a section with some items. on click over any item i want to open the modal form, so instead of creating multiple modal forms i created one modal and than using carousel inside it to go through the items.

Now if one clicks the 10th item i want to apply the carousel active class to the 10th item. For now i have given id to all of them and using following code for each item. But that is not a good approach.

I appreciate your help!

Thanks

     $('.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');
      });

for the snippet to work, please put in an example html! This one throws an error! — Prashanth Benny, Jan 31 '17 at 12:21

score 2 · Accepted Answer · edited May 23 '17 at 11:53

Use a generic class and add a data-attribute

$('.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>

For a longer explanation why to use $(this).attr("data-mod") rather than $(this).data("mod"), please see comments and jQuery Data vs Attr?

UPDATE: If you cannot change the html, you will need to interrogate the class

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>

score 0 · Answer 2 · answered Jan 31 '17 at 11:09

If I am not wrong you want to use one function instead of three different function you are using. you can give a custom data field to html eg. data-demo= "mod1".

and use the below code:

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

score 0 · Answer 3 · answered Jan 31 '17 at 11:24

JsFiddle

Without Data mode you can try this way.

$('.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');
 });

avoid duplicated jQuery code?

3 Answers3