更改等級符合陣列

-1

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>

來源

2015-04-29 gespinha

請說明;根據什麼改變什麼？ –

我們應該怎樣改變它？ – Pratik

@AlexK。我更新了問題 – gespinha

你可以做這樣的事情：

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

來源

2015-04-29 14:03:30 Albzi

'wp-one'和'wp-two'classes是可變的，可以是其他不同的類，所以我不能將它們用作選擇器。 – gespinha

我已經更新它只添加一個類@GEspinha – Albzi

感謝這工作，標記了錯誤的答案，對不起:) – gespinha

您可以添加此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]); 
    }); 
});

來源

2015-04-29 14:06:16

我很喜歡這被接受，即使它使用jQuery。沒有意義。編輯：顯然OP突然在標籤中添加jQuery。很確定它不在那裏。 – Enjoyted

這甚至不是那麼聰明（代碼）。用'maxSize'代替數組長度。有問題的代碼甚至無法添加該類！ @Enjoyted – Albzi

你去圖。奇。 – Enjoyted

是你需要的嗎？

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

來源

2015-04-29 14:09:31 Enjoyted

我不知道你要完成的任務。你是否想要通過可用的尺寸進行更改，以使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]); 
    } 
}

雖然在此代碼你有問題，大型元素將首先改變爲小分子，後來到媒體元素（在一個單一的點擊）。所以你必須記住那些最初大的變化，並把它們從小到中的變化中排除。由於簡單，我沒有在上面的代碼中包含它。

來源

2015-04-29 14:11:57 ImreNagy

更改等級符合陣列

回答

相關問題