Php 单击时使用javascript更改输入按钮样式
我想更改每次单击按钮时使用的按钮的样式，并一起更改其文本。问题是我想使用外部javascript来实现，但我对它的语法不太熟悉。为了详细说明我想要做的是有一个按钮，它的文本显示如下：非常好，很好，中等，失败。每个文本都使用CSS指定了自己的渐变颜色，比如绿色表示非常好，黄色表示良好，橙色表示中等，红色表示失败。我试着搜索它，但我只找到了一个不相关的帖子。我想我需要做一个带有on-click的按钮，每次我点击javascript时，它会添加0的int值，并在达到3后重置回0。然后我想我可以为css类分配用例，比如Php 单击时使用javascript更改输入按钮样式,php,javascript,css,codeigniter,Php,Javascript,Css,Codeigniter,我想更改每次单击按钮时使用的按钮的样式，并一起更改其文本。问题是我想使用外部javascript来实现，但我对它的语法不太熟悉。为了详细说明我想要做的是有一个按钮，它的文本显示如下：非常好，很好，中等，失败。每个文本都使用CSS指定了自己的渐变颜色，比如绿色表示非常好，黄色表示良好，橙色表示中等，红色表示失败。我试着搜索它，但我只找到了一个不相关的帖子。我想我需要做一个带有on-click的按钮，每次我点击javascript时，它会添加0的int值，并在达到3后重置回0。然后我想我可以为css
this.style=“failed” 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";
}
}
现在的问题是风格。：） 使用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]);
});
.VeryGood {//gradient for very good
}
.Good {//gradient for good
}
.Moderate {//gradient for moderate
}
.Failed { //gradient for failed
}
见此。这里是一个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>
$（文档）.ready（函数（）{
变量状态=[“非常好”、“良好”、“中等”、“失败”]；
变量颜色=['绿色'、'黄色'、'橙色'、'红色']；
var指数=0；
$（'body'）。在（'click'，'#button'，function（）上{
索引=++索引%4；
$（“#按钮”）.html（状态[索引]）；
$（“#按钮”）.css（'background-color'，colors[index]）；
});
});
很好
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]);
});
.VeryGood {//gradient for very good
}
.Good {//gradient for good
}
.Moderate {//gradient for moderate
}
.Failed { //gradient for failed
}
<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>
var i=1//如果元素在默认情况下不需要任何类，则更改为0
var classArray=新数组（）；
classArray[0]=“VeryGood”；
classArray[1]=“良好”；
classArray[2]=“中等”；
classArray[3]=“失败”；
函数changeClass（）
{
document.getElementById（“MyElement”）.className=classArray[i]；
i++；
如果（i>=3）{
i=0；
}
}
...
我的纽扣
现在，数组键
i