使用JavaScript更改CSS(jQuery）

Change CSS with JavaScript (jQuery)

本文关键字：jQuery CSS JavaScript 更改 使用      更新时间：2023-09-26

我有一个CSS"按钮"，它覆盖了一些表行。每次单击它，都会显示下一行。显示最后一行后，文本将更改为DONE！下面的脚本实现了这一切，并且正在发挥作用。

<script type="text/javascript">
$(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/

相关文章：