javascript - 如何在页面加载和按钮的单击时根据数字隐藏 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();
   }
});