使用Javascript更改CSS（jQuery） [英] Change CSS with Javascript (jQuery)

问题描述

我有一个覆盖一些表格行的CSS按钮。每次点击它，它都会显示下一行。在揭示最后一行后，文本被更改为完成！

I have a CSS "button" that is covering some table rows. Each time you click it, it reveals the next row. Upon revealing the last row, the text is changed to DONE! The script below makes all of this happen and it's working.

<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是...

I'd like to add in the following: When the text is changed to DONE!, I also want the background to change colors. The CSS that is applied to this button is...

.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;
}

有关我如何实现此目的的任何想法？ b

Any ideas on how I can achieve this?

推荐答案

用新的背景颜色创建一个类，然后添加它

create a class a with the new background color, and then add it

.completed-step {
 background-color: pink;
 cursor: default;
}

// replace the call to '$("#nextStep").css('cursor', 'default');'
$("#nextStep").addClass("completed-step");

下面是一个例子
http://jsfiddle.net/ED4Zt/1/

这篇关于使用Javascript更改CSS（jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！