Question

我正在为我的家具公司建立一个网站，并在自学一些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>

Answer 1

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

这种方式为相应的div建立选择。

row_number()

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

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

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

2 个答案:

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

2 个答案:

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