基于*多个*选择的javascript显示/隐藏div

问题描述 投票:-1回答:2

我正在为家具公司建立一个网站,并在自学一些JavaScript。我的产品有两个变量,木型(按钮)和表尺寸(下拉菜单)。我的电子商务api对每种产品都要求一个唯一的“添加到购物车” div。我想显示/隐藏基于唯一的woodtype和tablesize选择的适当的“添加到购物车”(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>
javascript variables dropdown show-hide
2个回答
0
投票

我可以看到的第一件事是您通过多次重新定义来覆盖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";
      }
    });
});

0
投票

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

这种方式为相应的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>
© www.soinside.com 2019 - 2024. All rights reserved.