javascript-jQuery If语句消息

真相只有一个 lv.1

发布时间：2022-08-15 05:42:51 250

相关标签： # 前端

我设置了代码，以便当用户输入负数或管道厚度的无效值（大于直径的 1/3）时，会弹出一条错误消息。但是，当我输入有效输入时，错误消息不会消失，只有在更新圆的外径值时才会消失。如何做到这一点，以便在我输入有效的厚度输入时，错误消息消失，或者当我删除无效输入时，错误消息消失。

此外，我在一个带有强大表格计算器的实际网页上使用这个程序。当我试图为用户创建图形视觉时，圆圈的大小取自计算器的输入。但是，点击“计算”按钮后，表单中的输入不再动态改变圆圈的大小，我必须完全刷新页面才能解决问题。为什么会发生这种情况，我该如何解决？

$(function() {
  $('.circle').hide();
  $('#outer_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $converted = ($outer_diameter * 3.75).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error").text($outer_diameter + " is too big").show();
      return false;
    }

    if ($outer_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }

    console.log($outer_diameter, $converted);
    $('.circle').css({
      height: (2 * $converted),
      width: (2 * $converted),
      top: "calc(50% - " + ($converted) + "px)",
      left: "calc(50% - " + ($converted) + "px)"
    });
    $('.circle').fadeIn(300);
    $('.circles').css({
      height: (2 * $converted) + 10,
      width: (2 * $converted) + 10
    })
    $('#error').hide();
  })



  $('.circle2').hide();
  $('#inner_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var $converted_2 = (($outer_diameter * 3.75) - (2 * ($inner_diameter * 3.75))).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error")
      return false;
    }

    if ($inner_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }

    if ($inner_diameter >= 0.33 * $outer_diameter) {
      $('#error').text('Wall Thickness invalid').show();
      return false;
    }


    console.log($inner_diameter, $converted_2);
    $('.circle2').css({
      height: (2 * $converted_2),
      width: (2 * $converted_2),
      top: "calc(50% - " + ($converted_2) + "px)",
      left: "calc(50% - " + ($converted_2) + "px)"
    });
    $('.circle2').fadeIn(300);
  })
  $('#error').hide();
});

body {
  margin: 0 auto;
  font-family: Helvetica, sans-serif;
}

.wrapper {
  height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.circles {
  margin-top: 50px;
  position: relative;
}

.circle {
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
  left: 50%;
  top: 50%;
  position: absolute;
}

.circle2 {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: red;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
  left: 50%;
  top: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="title">
    <h1>
      Cutter Calculator
    </h1>
  </div>
  <div class="Calculations">
    <input type="number" id="outer_diameter" placeholder="Enter Outer Diameter"> <br>
    <input type="number" id="inner_diameter" placeholder="Enter Thickness"> <br>
    <input type="button" id="bttn" name="calculate" value="Calculate">
  </div>

  <div class="circles">
    <span class="circle"></span>
    <span class="circle2"></span>
  </div>
  <p id="error">

  </p>
</div>

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。