如何根據頁面加載和onClick按鈕隱藏DIV？

Question

我有一個生成數字的跨度，如果它是0我想隱藏/顯示兩個div，如果它的其他任何東西則相反。

首先，它需要在頁面加載時應用，然后在單擊特定按鈕時應用。

HTML：

<button class="button">Add to cart</button>
<span class="catInStock">0</span>

 <div id="slave">SOLD OUT</div>
 <div id="slave-1">Some form</div>

碼：

var n = $("span.catInStock").text();

if (n == 0) {
     $("div#slave").hide();
     $("div#slave-1").show();
   } else {
     $("div#slave").show();
     $("div#slave-1").hide();
   }    

  $('.button').click(function () {
   if (n == 0) {
     $("div#slave").hide();
     $("div#slave-1").show();
   } else {
     $("div#slave").show();
     $("div#slave-1").hide();
   }
 });

我不認為運行它兩次是最好的選擇，更纖薄的東西是有道理的。

Answer 1

可以使用帶有布爾參數的toggle()來隱藏/顯示

function displaySlaves( ){
     var n = $("span.catInStock").text();
     $("div#slave").toggle( n=='0');
     $("div#slave-1").hide( n !='0' );
}
/* page load*/
$(function(){  
   displaySlaves( );
   $('.button').click(displaySlaves)
})

Answer 2

$('.button').bind('load click', function () {
   if (n == 0) {
     $("div#slave").hide();
     $("div#slave-1").show();
   } else {
     $("div#slave").show();
     $("div#slave-1").hide();
   }
});