用Javascript（jQuery）更改CSS
我有一个CSS“按钮”，覆盖一些表行。 每次单击它时，它都会显示下一行。 在显示最后一行时，文本将更改为DONE！ 下面的脚本使所有这一切都发生，并且它正在运行。
$(document).ready(function () { var last = $('tbody tr:hidden').length; if (last > 0) { $("#nextStep").click(function () { var x = $("tbody tr:hidden:first"); console.log(x); console.log(last); $("tbody tr:hidden:first").show(); last = $('tbody tr:hidden').length; if (last == 0) { $("#nextStep").html('DONE!'); $("#nextStep").css('cursor', 'default'); } }); } }); 我想添加以下内容：当文本更改为DONE！时，我还希望背景更改颜色。 应用于此按钮的CSS是……
.show_next_button { -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; box-shadow:inset 0px 1px 0px 0px #bbdaf7; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #222529; //display:inline-block; //display:table-cell; color:#ffffff; font-family:arial; font-size:25px; font-weight:bold; //padding-left:20%; //padding-right:20%; padding-top:50px; padding-bottom:50px; text-align:center; text-decoration:none; text-shadow:1px 1px 0px #4c6d8f; } .show_next_button:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5; cursor:pointer; } .show_next_button:active { position:relative; top:1px; }
关于如何实现这一目标的任何想法？
使用新的背景颜色创建一个类a，然后添加它
.completed-step { background-color: pink; cursor: default; } // replace the call to '$("#nextStep").css('cursor', 'default');' $("#nextStep").addClass("completed-step");
这是一个例子http://jsfiddle.net/ED4Zt/1/