个人中心
gpt4 book ai didi

javascript在 fiddle 中工作但不在我的html中工作

转载 作者：行者123 更新时间：2023-12-01 02:51:30 26 4
gpt4 key购买 nike

这可能是最大的菜鸟问题，但我的代码可以在 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/

26 4 0
文章推荐： python - 将绘图嵌入到 PyQt5 中的图形 View 中
文章推荐： javascript - Canvas 动画 Javascript 反向
文章推荐： javascript - 同一变量的返回值和日志不匹配
文章推荐： javascript - 纯 HTML 标签的选择性呈现
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com