通过foor循环一次在按钮上添加一个唯一的类

ibps3vxo 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(249)

我正在尝试在 accordion 的每个按钮上添加每个唯一类（在数组中给定）。我已经编写了jquery代码，但代码存在一些问题。目前它正在按钮上添加所有这些数组类。我只希望它一次只添加一个类。请在代码中突出显示问题。谢谢
编辑：
在我当前的场景中，将有四个以上的按钮，所以我想要一个通用的解决方案，它可以在所有按钮上添加类，并且一次只能添加单个类。
jquery代码：

jQuery(function(){
    var wordArray = ['one','two','three','four'];
    var count = jQuery('.accordion-wrap button').length;

    for ( var i = 0;i < count; i++ ) {
      jQuery('.accordion-wrap button').each(function(index, value) {
        jQuery(this).addClass(wordArray[i])                     
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-wrap">
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
</div>

for-loop jquery loops JavaScript

来源：https://stackoverflow.com/questions/68307085/add-single-unique-class-on-button-at-a-time-through-foor-loop

2条答案

按热度按时间

smtd7mpg1#

考虑例子1。

jQuery(function($) {
  var wordArray = ['one', 'two', 'three', 'four'];
  var wordLength = wordArray.length;
  var buttons = $('.accordion-wrap button');
  var i = 0;

  buttons.each(function(index, elem) {
    if (i % wordLength == 0) {
      i = 0;
    }
    $(elem).addClass(wordArray[i++]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-wrap">
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
</div>

这将在按钮上迭代，并将重复分配一个类。
考虑例子2

jQuery(function($) {
  var wordArray = ['one', 'two', 'three', 'four'];
  var buttons = $('.accordion-wrap button');

  $.each(wordArray, function(i, val) {
    buttons.eq(i).addClass(val);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-wrap">
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
</div>

此示例迭代数组中的类，并将该类分配给与索引匹配的按钮。

赞(0）回复(0）举报 2021-09-13

up9lanfz2#

因此，只需使用来自每个的索引。

jQuery(function() {
  var wordArray = ['one', 'two', 'three', 'four'];
  jQuery('.accordion-wrap button').each(function(index, value) {
    jQuery(this).addClass(wordArray[index])
  })
});

/* Just so we can see the class was added */
.one::after {
  content: 'one';
}
.two::after {
  content: 'two';
}
.three::after {
  content: 'three';
}
.four::after {
  content: 'four';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-wrap">
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
</div>

赞(0）回复(0）举报 2021-09-13

我来回答

通过foor循环一次在按钮上添加一个唯一的类

2条答案

相关问题

热门标签

最新问答