0

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

现在的问题是风格。:)

4

3 回答 3

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。

于 2012-10-30T09:44:12.740 回答
0

看看这个： 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 之后是 Good 然后是 Moderate 然后 Failed，它会将自身重置为非常好。希望这就是你要找的:)

于 2012-10-30T09:49:38.030 回答
0

这是一个 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-30T09:48:14.227 回答