javascript 显示/隐藏 div 基于 *multiple* 选择

Question

我正在为我的家具公司建立一个网站，并且正在自学一些 JavaScript。我的产品有两个变量，woodtype（按钮）和 tablesize（下拉菜单）。我的电子商务 api 需要每个产品都有一个独特的“添加到购物车”div。我想根据独特的木型和表格大小选择显示/隐藏适当的“添加到购物车”（var atc）div。这是我的代码。不知道我在这里做错了什么。

感谢任何帮助！

var atc = "woodtype" + "tablesize";
var woodtype;
var tablesize;

$(document).ready(function(){
    $('#SELECTSIZE').on('change', function() {
      if ( this.value == '2')
      {
       var tablesize = "2";
      }
      else if ( this.value == '4')
      {
       var tablesize = "4";
      }
      else if ( this.value == '8')
      {
       var tablesize = "8";
       }
      else
      {
        var tablesize = "6";
      }
    });
});

$(document).ready(function(){
    $('#SELECTWOOD').on('change', function() {
      if ( this.value == 'MAPLE')
      {
       var woodtype = "M";
      }
      else
      {
        var woodtype = "W";
      }
    });
});

$(document).ready(function(){
      if ( atc = "M4")
      {
        $("#M4").show();
      }
      else
      {
        $("#M4").hide();
      }

<body>

<div id='SELECTWOOD'>
<button value="WALNUT">SOLID WALNUT</option>
<button value="MAPLE">SOLID MAPLE</option>
</div>
<br>
<select id='SELECTSIZE'>
<option value="2">2 SEATER (30")</option>
<option value="4">4-6 SEATER (60")</option>
<option value="6">6 SEATER (76")</option>
<option value="8">8 SEATER (84")</option>
</select>
<br>
<div style='display:none;' id='W2'>ADD TO CART1<br/></div>
<div style='display:none;' id='W4'>ADD TO CART2<br/></div>
<div style='display:none;' id='W6'>ADD TO CART3<br/></div>
<div style='display:none;' id='W8'>ADD TO CART4<br/></div>
<div style='display:none;' id='M2'>ADD TO CART5<br/></div>
<div style='display:none;' id='M4'>ADD TO CART6<br/></div>
<div style='display:none;' id='M6'>ADD TO CART7<br/></div>
<div style='display:none;' id='M8'>ADD TO CART8<br/></div>
</body>

Answer 1

有很多事情可以做不同的事情。

这种方式为适当的 div 构建选择。

var atc;
var woodtype;
var tablesize=2;
  
    $('#SELECTSIZE').on('change', function() {
      if ( this.value === '2')
      {
        tablesize = "2";
      }
      else if ( this.value == '4')
      {
        tablesize = "4";
      }
      else if ( this.value == '8')
      {
        tablesize = "8";
       }
      else
      {
         tablesize = "6";
      }
      
      doit();
      
    });


  
  $("#maple").click(function() {
        woodtype = "M";
        doit();
  });
     
    $("#walnut").click(function() {

        woodtype = "W";
      
        doit();
      
    });

function doit(){
      atc = woodtype + tablesize;
      console.log("atc: "+atc);
      
      // hide all the cart divs
      $(".cartdiv").hide();
  
      // unhide the one selected
      $("#"+atc).show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id='SELECTWOOD'>
<button id="walnut" value="WALNUT">SOLID WALNUT</option>
<button id="maple"  value="MAPLE">SOLID MAPLE</option>
</div>
<br>
<select id='SELECTSIZE'>
<option value="2">2 SEATER (30")</option>
<option value="4">4-6 SEATER (60")</option>
<option value="6">6 SEATER (76")</option>
<option value="8">8 SEATER (84")</option>
</select>
<br>
<div class="cartdiv" style='display:none;' id='W2'>ADD TO CART1<br/></div>
<div class="cartdiv"  style='display:none;' id='W4'>ADD TO CART2<br/></div>
<div class="cartdiv"  style='display:none;' id='W6'>ADD TO CART3<br/></div>
<div class="cartdiv"  style='display:none;' id='W8'>ADD TO CART4<br/></div>
<div class="cartdiv"  style='display:none;' id='M2'>ADD TO CART5<br/></div>
<div class="cartdiv"  style='display:none;' id='M4'>ADD TO CART6<br/></div>
<div class="cartdiv"  style='display:none;' id='M6'>ADD TO CART7<br/></div>
<div class="cartdiv"  style='display:none;' id='M8'>ADD TO CART8<br/></div>

Answer 2

我可以看到的第一件事是您通过多次重新定义 tablesize 变量来覆盖它。

例子：

var tablesize;

$(document).ready(function(){
    $('#SELECTSIZE').on('change', function() {
      if ( this.value == '2')
      {
       tablesize = "2";
      }
      else if ( this.value == '4')
      {
       tablesize = "4";
      }
      else if ( this.value == '8')
      {
       tablesize = "8";
       }
      else
      {
       tablesize = "6";
      }
    });
});