使用javascript更改輸入按鈕樣式點擊

我想改變每次單擊該按鈕時使用的按鈕樣式，並一起更改其文本。問題是我想使用和外部JavaScript，我不熟悉它的語法。詳細說明我想要做的是讓按鈕的文本顯示如下：很好，很好，中等，失敗。每個文本都有它自己的使用CSS分配的漸變顏色讓我們說一個綠色爲非常好，黃色爲好，橙色爲中等，紅色爲失敗的漸變。試圖尋找它，但我只落在一個不相關的帖子。我認爲我需要點擊按鈕，每次點擊javascript都會從0增加int值，並在達到3後重置爲0.然後我認爲我可以使用case來分配類似this.style="failed"的css類那麼我不知道這是否可能。使用javascript更改輸入按鈕樣式點擊

更新：在做了一些研究之後，我設法做了一些關於改變的文本（單獨使用javascript），但還沒有成爲類的一部分，因爲我認爲該類是JavaScript中的一個關鍵字。這是我的腳本到目前爲止：

function buttonChange(){ 
    var button = document.getElementById("stats"); 
    switch (button.value) 
    { 
     case "Very Good": 
     button.value="Good"; 
     break; 
     case "Good": 
     button.value="Moderate"; 
     break; 
     case "Moderate": 
     button.value="Failed"; 
     break; 
     default: 
     button.value="Very Good"; 
    }  
}

現在的問題是風格。 :)

來源

2012-10-30 KaHeL

發表了一些代碼。它會更容易解決問題 – polin

這可能有幫助嗎？ http://stackoverflow.com/questions/6655423/change-div-style-onclick –

你每次創建不同的文本，或者只是在兩個，三個文本之間切換？ –

使用jQuery你的代碼可能是這個樣子：

var values = new Array('Very Good', 'Good', 'Moderate', 'Failed'); 
var colors = new Array('lime', 'yellow', 'orange', 'red'); 

$('#rate').click(function() { 

    // current index is stored in data attribute 
    var idx = $(this).data('value') + 1; 

    // last value was selected -> go back to first one 
    if (idx >= values.length) { 
     idx = 0; 
    } 

    // update data attribute with current index 
    $(this).data('value', idx); 

    // update button text 
    $(this).val(values[idx]); 

    // update button background color 
    $(this).css('background-color', colors[idx]); 

});

看到這個FIDDLE。

來源

2012-10-30 09:44:12

這裏是通過按鈕的文本和背景顏色的四種狀態一個jQuery溶液循環：

<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var states = ['Very Good', 'Good', 'Moderate', 'Failed']; 
    var colors = ['green', 'Yellow', 'orange', 'red']; 
    var index = 0; 
    $('body').on('click', '#button', function(){ 
     index = ++index%4; 
     $("#button").html(states[index]); 
     $("#button").css('background-color',colors[index]); 
    }); 
}); 
</script> 
</head> 
<body> 
    <button id="button" style="background-color:green"; type="button">Very Good</button> 
</body> 
</html>

注意模量（％）運算符，它從簡化「索引」的圓形增量0至3

來源

2012-10-30 09:48:14 mtmacdonald

看看這個： Change an element's class with JavaScript

我認爲你的CSS應該有梯度之類的東西這一切的樣式：

.VeryGood {//gradient for very good 
} 
.Good {//gradient for good 
} 
.Moderate {//gradient for moderate 
} 
.Failed { //gradient for failed 
}

，然後用這個JavaScript和HTML：

<script type="text/javascript"> 
var i = 1; //change to 0 if element dosen't need to have any class by default 
var classArray = new Array(); 
classArray[0] = 'VeryGood'; 
classArray[1] = 'Good'; 
classArray[2] = 'Moderate'; 
classArray[3] = 'Failed'; 
    function changeClass() 
    { 
     document.getElementById("MyElement").className = classArray[i];   
     i++; 
     if(i>=3){ 
      i=0; 
     } 
    } 
</script> 
... 
<button onclick="changeClass()">My Button</button>

現在，每一個按鈕被點擊，因此默認情況下，你可以有你的元素的類如威固特時間數組鍵i增加，並且每次點擊按鈕時，它都會進入下一個課程，所以在VeryGood成功後，然後中等失敗，它會重置爲VeryGood。希望這是你在找什麼:)

來源

2012-10-30 09:49:38

使用javascript更改輸入按鈕樣式點擊

回答

相關問題