使用JavaScript（jQuery的）

更改CSS我有一個CSS「按鈕」被覆蓋在某些錶行。每次點擊它，它都會顯示下一行。在揭示最後一行後，文本被更改爲完成！下面的腳本使所有這一切都發生並且正在工作。使用JavaScript（jQuery的）

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

我如何能做到這一點任何想法？

來源

2013-07-07 gtilflm

$（「＃NEXTSTEP」）。CSS（ '背景色'，「紅'）;不工作？ –

你也可以結合 $（「＃NEXTSTEP」）HTML（ 'DONE！'）; $（「＃NEXTSTEP」）的CSS（ '光標'， '默認'）。要 $（「＃NEXTSTEP」）HTML CSS（ '光標'， '默認'）。（ 'DONE！'）。這將提高性能略有 –

@賽斯McClaine：不，你的第一個評論不起作用。我也試着用你的2nd實現你的第一條評論，但它仍然不起作用。 – gtilflm

創建一個類一個新的背景顏色，然後將其添加

.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-07 04:30:30 Jason

由於某種原因不起作用。任何其他想法？ – gtilflm

漸變類阻止顯示新的背景顏色，它可以工作，如果你刪除複雜的CSS類，你可以看到它在這裏工作：http://jsfiddle.net/ED4Zt/1/ – Jason

你是對的。我正要發表回覆說，它的工作，但它不僅僅是改變背景顏色更加複雜。順便說一句，jsfiddle沒有爲我顯示任何東西。謝謝您的幫助！ – gtilflm

使用JavaScript（jQuery的）

回答

相關問題