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 に答える