Изменить класс в соответствии с массивом

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

это то, что вам нужно?

var state = 0; 

var size = ['small', 'medium', 'large']; 

btn = document.getElementById('changeSize'); 
div = document.getElementById('btn'); 
btn.addEventListener('click', function() { 
    state = state == size.length - 1 ? 0 : state + 1; 
    btn.className = 'wp-' + size[state]; 
}); 

JSFiddle

Answer 4

Я не уверен, что вы пытаетесь достичь. Вы хотите изменить размеры availyble, чтобы элемент 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]); 
    } 
} 

Хотя в этом коде вы быть_наст проблема, что крупные элементы будут изменены на первые малые элементы, а затем на средние элементы (в пределах одного клика). Поэтому вам придется помнить те изначально большие и исключать их из небольших изменений. Из-за простоты я не включил это в код выше.