避免重复 jQuery 代码？

Question

我是jquery的新手。我有一个包含一些项目的部分。单击任何我想打开模态窗体的项目，因此我没有创建多个模态窗体，而是创建了一个模态窗体，而不是在其中使用旋转木马来浏览项目。

现在，如果单击第 10 个项目，我想将轮播活动 class 应用到第 10 个项目。现在，我已经为所有项目提供了 id，并为每个项目使用了以下代码。但这不是一个好方法。

感谢您的帮助！

谢谢

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

使用通用 class 并添加 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>

有关为什么使用 $(this).attr("data-mod") 而不是 $(this).data("mod") 的详细说明，请参阅评论和 jQuery Data vs Attr?

更新：如果您无法更改 html，您将需要询问 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>

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

避免重复 jQuery 代码？

avoid duplicated jQuery code?

javascript

jquery

carousel

bootstrap-modal