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