javascript - Change class according to array -

i've got array:

var size = [small, medium, large]; 

and element:

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

how change size class looping through size array in jquery on pressing button? example if element has wp-small, change wp-medium , forth looping through array.

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

you can this:

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

jsfiddle

it tidied i'm no js wizard.

basically, first 4 lines me putting stuff variables. simple stuff.

i make function on click of button, removes class element current in size array. checks see number i @ (starting @ 0) , if it's larger length of size, resets beginning, if not, goes next array element.

it can done in jquery too:

$(document).ready(function(){     var size = ['small', 'medium', 'large'],         button = $("#button"),         sentence= $("#sentence"),         = 0;      button.click(function(){         sentence.removeclass("wp-"+size[i]);         (i == size.length - 1) ? = 0 : i++;         sentence.addclass("wp-"+size[i]);     }); }); 

jsfiddle

but faster , simple in pure javascript