单击时使用 javascript 更改输入按钮样式答案

【问题标题】：change input button style using javascript on click单击时使用 javascript 更改输入按钮样式
【发布时间】：2012-10-30 17:58:53
【问题描述】：

我想更改每次单击该按钮时所使用按钮的样式并一起更改其文本。问题是我想使用我不太熟悉它的语法的外部javascript来做到这一点。详细说明我想要做的是有一个按钮，其文本显示如下：非常好，好，中等，失败。每个文本都有自己使用 CSS 指定的渐变颜色，比如说绿色表示非常好，黄色表示好，橙色表示中等，红色表示失败。尝试搜索它，但我只找到了一个不相关的帖子。我认为我需要在单击时创建一个按钮，每次单击 javascript 都会从 0 添加 int 值，并在达到 3 后重置回 0。然后我想我可以使用 css 类分配的案例，如 @ 987654322@嗯我不知道这是否可能。

更新：在做了一些研究之后，我设法对不断变化的文本（仅使用 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";
    }       
}

现在的问题是风格。 :)

【问题讨论】：

发布一些代码。解决问题会更容易
这可能有帮助吗？ stackoverflow.com/questions/6655423/change-div-style-onclick
您每次都在创建不同的文本，或者只是在两个、三个文本之间切换？？？？

标签： php javascript css codeigniter

【解决方案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。

【讨论】：

【解决方案2】：

看看这个： 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之后好然后中等然后失败，它会自行重置为非常好。希望这就是你要找的:)

【讨论】：

【解决方案3】：

这是一个 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>

注意 modulus (%) 运算符，它简化了 'index' 从 0 到 3 的循环增量。

【讨论】：