Question

我有这个阵列：

var size = [small, medium, large];

和这个元素：

<div class="wp-one wp-two wp-small"></div>

如何在按size的情况下更改JQuery中button数组的大小类循环？例如，如果元素具有wp-small，则更改为wp-medium，然后循环遍历数组。

.wp-small {
  color: #f00;
}
.wp-medium {
  color: #0f0;
}
.wp-large {
  color: #00f;
}

<div class="wp-one wp-two wp-small">fdgbfbfnghn</div>

<button>CHANGE CLASS</button>

Answer 1

您可以这样做：

var size = ['small', 'medium', 'large'];
var button = document.getElementById("button");
var id= document.getElementById("sentence");
var i = 0;
button.onclick = function(){
    sentence.classList.remove("wp-"+size[i]);
    (i == size.length - 1) ? i = 0 : i++;
    sentence.classList.add("wp-"+size[i]);
}

JSFiddle

它可能可以整理，但我不是JS向导。

基本上，前4行只是我把东西放入变量。简单的东西。

然后我创建一个函数，点击button，它会从size array中当前元素中删除该类。然后它检查i所在的数字（从0开始），如果它大于size的长度，它会重置回到开头，如果没有，则转到下一个数组元件。

也可以在jQuery中完成：

$(document).ready(function(){
    var size = ['small', 'medium', 'large'],
        button = $("#button"),
        sentence= $("#sentence"),
        i = 0;

    button.click(function(){
        sentence.removeClass("wp-"+size[i]);
        (i == size.length - 1) ? i = 0 : i++;
        sentence.addClass("wp-"+size[i]);
    });
});

JSFiddle

但是在纯JavaScript中会更快更简单

Answer 2

你可以添加这个jQuery代码：

 $(function(){
    currSize = 0;
    maxSize = (size.length - 1);
    $('button').on('click', function(){
       $('.wp-one').removeClass('wp-'+size[currSize]);
       if (currSize < maxSize){
          currSize++;
       }
       else{
          currSize = 0;
       }
       $('.wp-one').addClass('wp-'+size[currSize]);
    }); 
 });

Answer 3

我不确定你想要完成什么。你想通过avlevble大小改变，以便wp-small元素将是一个wp-medium元素，依此类推？大的会再次变小吗？

若是，请尝试：

buttonclickHandler = function(e) {
  for(i=size.length;i>0;i--) {
    var nextIndex = i % size.length;
    $(".wp-" + size[i-1]).switchClass(".wp-" + size[i-1],".wp-" + size[nextIndex]);
  }
}

虽然在此代码中您遇到的问题是，大型元素首先会更改为小元素，然后会更改为中型元素（只需单击一次）。因此，您必须记住那些最初较大的那些并将它们从中小变化中排除。由于简单性，我没有在上面的代码中包含它。

根据数组更改类

3 个答案: