php - 单击时使用javascript更改输入按钮样式

Question

我想在每次单击该按钮时更改我正在使用的按钮的样式，同时更改它的文本。问题是我想使用外部 javascript 来完成它，我不太熟悉它的语法。详细说明我想做的是让一个按钮显示如下文本:非常好、好、中等、失败。每个文本都有自己使用 CSS 指定的渐变颜色，假设渐变绿色表示非常好，黄色表示好，橙色表示中等，红色表示失败。试图搜索它，但我只找到了一个不相关的帖子。我想的是我需要制作一个点击按钮，每次我点击 javascript 都会从 0 添加 int 值，并在它达到 3 后重置回 0。然后我想我可以用 case 来分配 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 .