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

Question

我想更改每次單擊該按鈕並一起更改其文本時所使用的按鈕的樣式。 問題是我想使用和我不太熟悉它的語法的外部javascript來做到這一點。 要詳細說明我想做的事情，就是有一個按鈕，其文本顯示如下：Very Good，Good，Moderate，Failed。 每個文本都有自己的使用CSS分配的漸變色，例如，綠色表示很好，黃色表示很好，橙色表示中等，紅色表示失敗。 嘗試搜索它，但我只找到了不相關的帖子。 我想的是，我需要一個按鈕上點擊，每次我點擊的JavaScript將從0 INT值和重置為0，達到3后話，我想我可以使用情況下，如CSS類分配this.style="failed"我不知道這是否可行。

更新：經過一些研究后，我設法對文本的更改做了一些事情（僅使用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";
    }       
}

現在的問題是樣式。 :)

Answer 1

使用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 。

Answer 2

這是一個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。

Answer 3

看一下：用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變為“好”，“中等”然后“失敗”之后，它將重置為VeryGood。 希望這是您正在尋找的:)

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

問題描述

3 個解決方案

解決方案1
1 已采納 2012-10-30 09:44:12

解決方案2
0 2012-10-30 09:48:14

解決方案3
0 2012-10-30 09:49:38

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

問題描述

3 個解決方案

解決方案1 1 已采納 2012-10-30 09:44:12

解決方案2 0 2012-10-30 09:48:14

解決方案3 0 2012-10-30 09:49:38

解決方案1
1 已采納 2012-10-30 09:44:12

解決方案2
0 2012-10-30 09:48:14

解決方案3
0 2012-10-30 09:49:38