这可能是最大的菜鸟问题，但我的代码可以在 fiddle 中工作，而不是在我的 html 中工作。少了什么东西？这是 fiddle 链接，下面是我的index.html:http://jsfiddle.net/b342vq9m/9/
我认为这与未调用 javascript 有关，但我不知道该怎么做。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var atc;
var woodtype;
var tablesize=2;
$("#WM0").show();
$('#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();
$("#WM0").hide();
});
$("#walnut").click(function() {
woodtype = "W";
doit();
$("#WM0").hide();
});
function doit(){
atc = woodtype + tablesize;
console.log("atc: "+atc);
// hide all the cart divs
$(".cartdiv").hide();
// unhide the one selected
$("#"+atc).show();
}
}
</script>
<title>TESTPAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
</head>
<body>
<div id='SELECTWOOD'>
<button id="walnut" value="WALNUT">SOLID WALNUT</button>
<button id="maple" value="MAPLE">SOLID MAPLE</button>
</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='WM0'>ADD TO CART0<br/></div>
<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>
</body>
</html>最佳答案
可能它不起作用，因为您缺少关闭 document.ready 上的函数
...
function doit(){
atc = woodtype + tablesize;
console.log("atc: "+atc);
// hide all the cart divs
$(".cartdiv").hide();
// unhide the one selected
$("#"+atc).show();
}
}); //You are missing the ");" on this part
</script>
关于javascript在 fiddle 中工作但不在我的html中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59216642/