Question

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

更新：在做了一些研究后，我设法做了一些关于改变文本的事情（仅使用javascript）但是还没有类部分，因为我认为该类是javascript中的关键字。到目前为止，这是我的剧本：

this.style="failed"

现在的问题是风格。：）

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>

注意模数（％）运算符，它简化了'index'从0到3的循环增量。

Answer 3

看看这个： 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来好然后适度然后失败，它重置为VeryGood。希望这就是你要找的东西：）

点击时使用javascript更改输入按钮样式

3 个答案: