外部jQuery文件无法运行：移至外部文件后计算器功能失效求助

我看到你把计算器代码迁移到外部JS文件后出现了运行故障，帮你梳理出几个关键问题并给出修正方案：

1. 外部JS文件引入错误 #

你的HTML中引入外部JS的标签写法有误：

<script type="custom.js"></script>

这里混淆了type和src属性的作用：type用于声明脚本的MIME类型（通常可省略，浏览器默认识别为text/javascript），而指定外部文件路径需要用src属性。正确写法应该是：

<script src="custom.js"></script>

如果custom.js不在HTML文件的同级目录，需要调整src的相对路径（比如./js/custom.js）。

2. jQuery选择器语法错误 #

你在JS中绑定checkbox的change事件时，类选择器缺少了.前缀：

$("checkbox_dårlig").change(calculate); // 错误写法

因为这些checkbox的标识是class="checkbox_dårlig"，jQuery的类选择器必须以.开头，正确写法应为：

$(".checkbox_dårlig").change(calculate); // 正确写法

另外两个checkbox的选择器$("checkbox_normal")、$("checkbox_bra")也需要做同样的修正。

修正后的完整代码 #

修正后的HTML #

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="custom.js"></script>
</head>
<body>
  <div><input id="a1" type="text" value="0" min="0"/></div>
  <div>Velg en:</div>
  <div>Dårlig<input type="checkbox" name="checkbox" class="checkbox_dårlig"></div>
  <div>Normal<input type="checkbox" name="checkbox" class="checkbox_normal"></div>
  <div>Bra<input type="checkbox" name="checkbox" class="checkbox_bra"></div>
  <select>
    <option disabled selected value> -- Velg en type -- </option>
    <option id="test1">Test 1</option>
    <option id="test2">Test 2</option>
    <option id="test3">Test 3</option>
    <option id="test4">Test 4</option>
    <option id="test5">Test 5</option>
  </select>
  <div>Value: <input id="pris" type="text" value="0" /></div>
</body>
</html>

修正后的custom.js #

$(document).ready(function(){
  $('#a1').keyup(calculate);
  $(".checkbox_dårlig").change(calculate);
  $(".checkbox_normal").change(calculate);
  $(".checkbox_bra").change(calculate);
  $("select").change(calculate);

  $('input[type="checkbox"]').on('change', function() {
    $('input[type="checkbox"]').not(this).prop('checked', false);
    calculate();
  });
});

function calculate(e) {
  // 在这里补充你的计算逻辑
  // 示例：获取输入值并计算
  const inputVal = parseFloat($('#a1').val()) || 0;
  const selectedType = $('input[type="checkbox"]:checked').attr('class');
  const selectedOption = $('select option:selected').text();
  
  // 根据业务规则计算结果，更新到#pris
  let result = 0;
  // 这里替换成你的实际计算逻辑
  $('#pris').val(result);
}

额外提示 #

• 确保custom.js文件的路径正确，浏览器能成功加载它（可以在开发者工具的Network标签页查看JS文件的加载状态）。
• 你的checkbox单选逻辑是正常的，不过可以简化事件绑定，比如直接给所有checkbox绑定一次事件，避免重复代码。

内容的提问来源于stack exchange，提问作者Seb