Jquery 下拉框式的简易计算器 求大佬解答

Question

html代码
<p><input name="d1" type="text" id="d1" width="50" />
    <select name="op" id="op">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input name="d2" type="text" id="d2" width="50" />
    =
    <input name="d3" type="text" id="d3" width="50" />
  </p>Jquery代码
$("#cal").click(function () {
        var x = $("#op option:selected").val();
        var x1 = parseFloat($("#d1").val());
        var x2 = parseFloat($("#d2").val());
        var x3 = 0;
        function calculate() {
          if (x == "+") {
            x3 = x1 + x2;
          };
          if (x == "-") {
            x3 = x1 - x2;
          }
          if (x == "*") {
            x3 = x1 * x2;
          }
          if (x == "/") {
            x3 = x1 / x2;
          }
        };
        $("#d3").val(x3);
        $("#d1").val("");
        $("#d2").val("");
      });

Answer 1

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div>
  <input name="d1" type="text" id="d1" width="50" />
  <select name="op" id="op">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input name="d2" type="text" id="d2" width="50" />
  =
  <input name="d3" type="text" id="d3" width="50" />
  <input id="cal" type="button" value="计算">
  <input id="cl" type="button" value="清空">
</div>
<script>
  // 计算
  $("#cal").click(function () {
    var x = $("#op").val();
    var x1 = parseFloat($("#d1").val());
    var x2 = parseFloat($("#d2").val());
    var x3 = 0;
    switch (x) {
      case '+':
        x3 = x1 + x2;
      break;
      case '-':
        x3 = x1 - x2;
      break;
      case '*':
        x3 = x1 * x2;
      break
      case '/':
        x3 = x1 / x2;
      break
    };
    $("#d3").val(x3);
  });
  // 清空
  $('#cl').click(function () {
    $("#d3").val("");
    $("#d1").val("");
    $("#d2").val("");
  })
</script>

Answer 2

switch换成if就可以了

Answer 3

我广场用 var x = $("#op option:selected").val(); 可以运行 可是现在不行了用 var x = $("#op").val(); 才可以  请问这是为什么

Answer 4

应该两个都可以的，第一个是获取option选中的值，第二个是获取select的值。其实底层实现是一样的，选择器不一样而已

Answer 5

本来是两个都可以 但我后来用option那个语句就执行不了  我搞不清楚原因

Answer 6

只是jq的选择器而已，其实不重要。可以看看jq的 api网研究研究。jq太久远了都忘记了，现在也少用jq