javascript - 执行javascript时jQuery代码不执行代码？

问题描述

代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>

    <div class="container mt-4">
      <h1 class="text-left" style="margin-bottom: 50px">Daily Fridge & Freezer Monitoring Record</h1>
        <form action="/auth/21-TEMP-01b" method="post" id="form">
          <div class="form-group">
            <label>Select Fridge Or Freezer</label>
            <select class="form-control" id="fridgeFreezer" name="fridge">
              <option value="Fridge-1">Fridge 1</option>
              <option value="Fridge-2">Fridge 2</option>
            </select>
          </div>

          <div class="form-group fridges Fridge-1">
            <h4>Fridge 1</h4>
            <label>Temperature °C</label>
            <input class="form-control" type="number" id="temperature-1" name="temperature-1">

            <label>Comments</label>
            <textarea class="form-control" rows="3" id="comments-1" name="comments-1"></textarea>
          </div>

          <div class="form-group fridges Fridge-2">
            <h4>Fridge 2</h4>
            <label>Temperature °C</label>
            <input class="form-control" type="number" id="temperature-2" name="temperature-2">

            <label>Comments</label>
            <textarea class="form-control" rows="3" id="comments-2" name="comments-2"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>



  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script type="text/javascript">

  $(document).ready(function(){


      $("select").change(function(){
      $(this).find("option:selected").each(function(){
      if($(this).attr("value")=="Fridge-1"){
          $(".fridges").not(".Fridge-1").hide();
          $(".Fridge-1").show();
      }
      else if($(this).attr("value")=="Fridge-2"){
          $(".fridges").not(".Fridge-2").hide();
          $(".Fridge-2").show();
      }
      else{
          $(".fridges").hide();
      }
      });
  })

  .change();

  var temp1 = document.getElementById('temperature-1');
  var form = document.getElementById('form');

  form.addEventListener('submit', function(e) {

    if(temp1.value === '' || temp1.value == null) {
      e.preventDefault()


      document.querySelector('#fridgeFreezer [value="Fridge-1"]').selected = true;

      alert("temp1 not fully filled")
    }
  })


  });

  </script>
  </body>
</html>

主意

我正在尝试创建表单验证。

运行上述代码详情

当您更改下拉菜单中的选项时，您会看到 - 加载不同的 div 元素。这是通过脚本中的 jQuery 代码完成的。

选项1

选项 2

接下来，Javascript

我将使用 Javascript 来验证表单。

我才刚刚开始验证fridge 1. 如果值为空，我会收到一条警报，说明哪个输入尚未填充。

在这种情况下，我已清除冰箱 1 中的所有数据以运行if错误语句。

注意这行代码：

document.querySelector('#fridgeFreezer [value="Fridge-1"]').selected = true;

这将重新选择option一个有错误的。

但是当我运行它时 - 这会发生。

Div元素fridge-2还在显示？jQuery 怎么没有执行？

标签： javascripthtmljquery

form.addEventListener('submit', function(e) { if(temp1.value === '' || temp1.value == null) { e.preventDefault() $('#fridgeFreezer').val("Fridge-1"); // can be simplified like this $('#fridgeFreezer').trigger("change"); // important line alert("temp1 not fully filled") } })

javascript - 执行javascript时jQuery代码不执行代码？

问题描述

解决方案

推荐阅读