0

我有一个覆盖一些表格行的 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;
}

关于如何实现这一目标的任何想法？

4

1 回答 1

0

用新的背景颜色创建一个类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/

于 2013-07-07T04:30:30.193 回答