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

我不认为运行它两次是最好的选择，更 slim 的东西会有意义。

Answer 1

可以使用带有 bool 参数的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)
})