Question

使用jQuery，如何将类添加到具有相同编号的项目？

    <div class="button1"></div>
    <div class="button2"></div>
    <div class="button3"></div>

    <div class="hidden panel1"><div>
    <div class="hidden panel2"><div>
    <div class="hidden panel3"><div>

    // something to the effect of 
    <script>
       $('.button[n]').on('click', function(e) {
          e.preventDefault();
          $(('.hidden[n]').addClass('active');
       });
    </script>

谢谢

Answer 1

试试这个 -

<div class="button1 btnclick" data-id="1"></div>
<div class="button2 btnclick" data-id="2"></div>
<div class="button3 btnclick" data-id="3"></div>


<div class="hidden panel1"><div>
<div class="hidden panel2"><div>
<div class="hidden panel3"><div>



// something to the effect of 
    <script>
       $('.btnclick').on('click', function(e) {
          e.preventDefault();
          var id = $(this).data('id');
          $(('.panel'+id).addClass('active');
       });
    </script>

Answer 2

添加与div类相对应的data-*。
使用data-*告知要选择哪个班级。
使用^首发选择器

attribute-starts-with-selector

描述：选择具有指定属性的元素，其值始于给定字符串。

＆＃13;

$('[class^=button]').on('click', function(e) {
  e.preventDefault();
  $('.hidden').removeClass('active');
  var panel = $(this).attr('data-panel');
  $('.'+panel).addClass('active');
});

＆＃13;

.active {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button1" data-panel="panel1">1</div>
<div class="button2" data-panel="panel2">2</div>
<div class="button3" data-panel="panel3">3</div>

<div class="hidden panel1">1
</div>
<div class="hidden panel2">2
</div>
<div class="hidden panel3">3
</div>

＆＃13;

Answer 3

您可以使用解决方案https://jsfiddle.net/udoarexb/

$('div.btn').click(function(){
  $('div.panel' + $(this).index())
    .addClass('active')
    .siblings('div.hidden')
    .removeClass('active');
});

.active{
  background: blue;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn button1">Button 1</div>
<div class="btn button2">Button 2</div>
<div class="btn button3">Button 3</div>

<div class="hidden panel1">Panel 1</div>
<div class="hidden panel2">Panel 2</div>
<div class="hidden panel3">Panel 3</div>

我在按钮类中添加了一个额外的类btn。

另一种解决方案，无需在HTML中添加任何额外属性 在这里，您可以使用解决方案https://jsfiddle.net/udoarexb/1/

$('div[class^=button]').click(function(){
	var num = $(this).attr('class');
  num = num.replace(/\D/g, '');
	num = parseInt(num, 10);
  $('div.panel' + num).addClass('active').siblings('div.hidden').removeClass('active');
});

.active{
  background: blue;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button1">Button 1</div>
<div class="button2">Button 2</div>
<div class="button3">Button 3</div>

<div class="hidden panel1">Panel 1</div>
<div class="hidden panel2">Panel 2</div>
<div class="hidden panel3">Panel 3</div>

希望这会对你有所帮助。

将类添加到具有相同编号的项目

3 个答案: