代码仅在警报时才能正常工作。评论提醒其给予答案

【问题标题】：Code is working properly only with alert. Commenting alert its giving代码仅在警报时才能正常工作。评论提醒其给予
【发布时间】：2021-10-13 05:02:30
【问题描述】：

需要以下代码的帮助。此代码应该在没有任何警报的情况下工作。但它的故障。当取消注释警报时，它按预期工作。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10">
  <title></title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <style>
    .gallery {
      position: relative;
      background: rgba(15, 202, 152, 0.2) !important;
      border: 2px solid rgba(15, 202, 152, 0.3) !important;
      padding: .375rem .75rem;
      width: 100%;
      min-height: 190px;
      padding: 10px;
    }
    
    .gallery .gallery-item {
      position: relative;
      min-height: inherit;
      text-align: center;
    }
    
    .gallery .gallery-item label {
      font-size: 16px;
      font-weight: 400;
      line-height: 1;
      color: #0fca98 !important;
      vertical-align: super;
    }
    
    .gallery .gallery-item .upload-container {
      position: relative;
      text-align: center;
      min-height: inherit;
      width: 100%;
    }
    
    .gallery .gallery-item .upload-container h5.hint {
      font-size: 19px;
      line-height: 19px;
      text-align: center;
      height: 19px;
      width: 100px;
    }
    
    .gallery .gallery-item .upload-container h5.hint {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    
    .gallery .gallery-item .upload-container.uploaded h5.hint {
      display: none;
    }
    
    .gallery .gallery-item .upload {
      position: relative;
      min-height: inherit;
      width: 100%;
      background: rgba(15, 202, 152, 0.3) !important;
    }
    
    .gallery .gallery-item .upload img {
      width: 95%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .gallery .gallery-item .form-control {
      height: 35px;
      font-size: 14px;
      padding: .5rem;
    }
  </style>
</head>

<body class="blue-skin">

  <div id="main-wrapper">

    <section class="gray-simple pt-3">

      <div class="container">
        <div class="row">
          <div class="col-lg-12 col-md-12">
            <div class="submit-page">
              <div class="form-submit">
                <div class="submit-section">
                  <div class="row">
                    <div class="form-group col-md-3">
                      <label>Rooms</label>
                      <div class="clear"></div>
                      <select class="form-control" name="bedrooms" id="rooms">
                        <option value="">Choose...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Gallery -->
              <div class="form-submit">
                <h3>Gallery</h3>
                <div class="submit-section">
                  <div class="row">

                    <div class="form-group col-md-12">
                      <label>Upload Gallery</label> <span class="pics"></span>
                      <div class="row gallery">
                        <div class="col-md-3 gallery-item" elemid="img-cphoto">
                          <label>Cover Photo</label>
                          <div class="upload-container">
                            <input type="file" name="image" class="d-none" accept="image/png, image/tiff, image/jpeg, image/jpg" required/>
                            <div class="upload">
                              <img src="" id="img-cphoto" class="d-none" />
                            </div>
                            <h5 class="hint"><i class="fa fa-upload text-info" aria-hidden="true"></i> Upload</h5>
                          </div>
                          <input name="title[]" class="form-control" placeholder="Photo Title e.g. Front Pic" required />
                          <input name="img-area[]" class="form-control" placeholder="Covered Area" required />
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>

    </section>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script type="text/javascript">
    (function() {
      var start;
      $("#rooms").on('focus', function() {
        start = "";
        start = this.value;
        if (start === "" || start === "NaN") {
          start = 0;
        }
        start = parseInt(start);
      }).change(function() {
        var num;
        num = parseInt(this.value);
        //alert(start);
        // Alert uncomment karne per thik function kar raha hai

        var label = "Room ";
        var lblTxt;
        var elem = "";
        if (start > num) {
          for (let i = start; i > num; i--) {
            var rlbl = $.trim(label) + '-' + (parseInt(i));
            $(".gallery-item").each(function(index) {
              var relbl = $(this).attr('elemid');
              console.log(index + ": " + relbl);
              if (relbl === rlbl) {
                $(this).remove();
              }
            });
          }
        }

        if (start < num) {
          for (let i = start; i < num; i++) {
            lblTxt = label + (parseInt(i) + 1);
            elem = '<div class="col-md-3 gallery-item"  elemid="' + $.trim(label) + '-' + (parseInt(i) + 1) + '">';
            elem += '<label>' + lblTxt + '</label>';
            elem += '<div class="upload-container">';
            elem += '<input type="file" name="image" class="d-none" accept="image/png, image/tiff, image/jpeg, image/jpg" required/>';
            elem += '<div class="upload">';
            elem += '<img src=""  id="' + $.trim(label) + '-' + (parseInt(i) + 1) + '" class="d-none" />';
            elem += '</div>';
            elem += '<h5 class="hint"><i class="fa fa-upload text-info" aria-hidden="true"></i> Upload</h5>'
            elem += '</div>';
            elem += '<input name="title[]" class="form-control" placeholder="Photo Title e.g. Master Bedroom" required />';
            elem += '<input name="img-area[]" class="form-control" placeholder="Carpet Area" required />';
            elem += '</div>';
            $('.gallery').append(elem);
          }
        }
      });
    })();
  </script>
</body>

</html>

请求开发人员成员检查此代码并帮助解决问题。我已将这段代码与大代码分开，并签入名为 error.html 的单独文件，并在几乎所有浏览器中进行了测试。错误保持不变。这里提交的代码是error.html文件的完整代码。

正在寻找解决此问题的方法。

【问题讨论】：

浏览器控制台中是否有任何错误消息？
当您点击一条警报消息时，元素的焦点会发生变化，所以您可能希望您的focus 处理程序再次触发，但它不会没有警报消息？
什么究竟不起作用？
我对这段代码的期望。在更改房间数量时，应添加要添加的图像图像上传框。假设我在下拉列表中选择 2。它应该添加 2 个图像上传器框，它工作正常。现在，如果我在选择 2 后将房间数更改为 3。它应该只添加 1 个图像上传框。但它又添加了另一个 3，这是故障。另一方面，将房间数量从 3 变为 1。应该只剩下一个占位符。这没有发生。但是当取消注释 //alert(start);代码按预期工作。整个代码都写好了，请运行一次检查。

标签： javascript

【解决方案1】：

我已经在How to remove focus from input field in jQuery? 的帮助下解决了这个问题现在代码是：

<script type="text/javascript">
(function() {
  var start;
  $("#rooms").on('focus', function() {
    start = "";
    start = this.value;
    if (start === "" || start === "NaN") {
      start = 0;
    }
    start = parseInt(start);
  }).change(function() {
    var num;
    num = parseInt(this.value);
    //alert(start);
    // Alert uncomment karne per thik function kar raha hai

    var label = "Room ";
    var lblTxt;
    var elem = "";
    if (start > num) {
      for (let i = start; i > num; i--) {
        var rlbl = $.trim(label) + '-' + (parseInt(i));
        $(".gallery-item").each(function(index) {
          var relbl = $(this).attr('elemid');
          console.log(index + ": " + relbl);
          if (relbl === rlbl) {
            $(this).remove();
          }
        });
      }
    }

    if (start < num) {
      for (let i = start; i < num; i++) {
        lblTxt = label + (parseInt(i) + 1);
        elem = '<div class="col-md-3 gallery-item"  elemid="' + $.trim(label) + '-' + (parseInt(i) + 1) + '">';
        elem += '<label>' + lblTxt + '</label>';
        elem += '<div class="upload-container">';
        elem += '<input type="file" name="image" class="d-none" accept="image/png, image/tiff, image/jpeg, image/jpg" required/>';
        elem += '<div class="upload">';
        elem += '<img src=""  id="' + $.trim(label) + '-' + (parseInt(i) + 1) + '" class="d-none" />';
        elem += '</div>';
        elem += '<h5 class="hint"><i class="fa fa-upload text-info" aria-hidden="true"></i> Upload</h5>'
        elem += '</div>';
        elem += '<input name="title[]" class="form-control" placeholder="Photo Title e.g. Master Bedroom" required />';
        elem += '<input name="img-area[]" class="form-control" placeholder="Carpet Area" required />';
        elem += '</div>';
        $('.gallery').append(elem);
      }
    }
   $("#rooms").blur();
  });
})();

我要感谢 Bergi 让我关注焦点问题。现在它按预期工作。

【讨论】：