Question

我是jquery的新手。我有一个部分有一些项目。点击我要打开模态表格的任何项目，因此我创建了一个模态，而不是创建多个模态表单，而不是在其中使用轮播来浏览项目。

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

感谢您的帮助！

由于

＆＃13;

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

＆＃13;

Answer 1

使用泛型类并添加数据属性

＆＃13;

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

＆＃13;

.active {
  color: red
}

＆＃13;

<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>

＆＃13;

要获得更长的解释，请使用$(this).attr("data-mod")而不是$(this).data("mod")，请参阅评论和jQuery Data vs Attr?

更新：如果您无法更改html，则需要查询该课程

＆＃13;

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

＆＃13;

.active {
  color: red
}

＆＃13;

<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>

＆＃13;

Answer 2

如果我没有错，你想使用一个功能而不是你正在使用的三个不同的功能。你可以给html提供一个自定义数据字段，例如。 data-demo =“mod1”。

并使用以下代码：

SELECT     a.datacadastro, <br>
       e.nome AS solicitante, <br>
       b.nome AS servico, <br>
       d.valorservico, <br>
       c.idlabpedido, <br>
       f.dente <br>
FROM       labpedido a <br>
INNER JOIN labservico b <br>
INNER JOIN labpedidoservico c
ON         c.idlabservico = b.id
AND        a.id = c.idlabpedido <br>
INNER JOIN labservicovalor d 
ON         ( 
                  c.idlabservico = d.idlabservico) <br>
INNER JOIN usuarios e
ON         (
                  a.usuarioinsert = e.id) <br>
INNER JOIN labpedidoservicodente f 
ON         ( 
                  a.id = f.idlabpedido)<br>
where      b.status='1' <br>
ORDER BY   a.datacadastro<br>

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代码？

3 个答案: