jQuery If語句消息

Question 1

我設置了代碼，這樣當用戶輸入負數或管道厚度的無效值（大于直徑的1/3）時，就會彈出一條錯誤消息。但是，當我輸入有效輸入時，錯誤消息不會消失，只有在更新圓的外徑值時才會消失。如何使其在我輸入厚度的有效輸入時，錯誤消息消失，或者在我刪除無效輸入時，錯誤消息消失。

此外，我正在一個帶有強大表單計算器的實際網頁上使用這個程序。當我試圖為用戶創建圖形視覺時，圓圈的大小取自計算器的輸入。然而，在點擊“計算”按鈕后，表單中的輸入不再動態地改變圓圈的大小，我必須完全刷新頁面來解決這個問題。為什么會發生這種情況？我該如何解決？

jsFiddle: https://jsfiddle.net/Kaevonz/6rc9jbo3/105/

Question 2

問題是你有$('#error').hide()；在$('#inner_diameter').on('change'之外，function（）{因此，如果您這樣更改函數：

$('#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();
  })

工作如你所愿

對于第二個問題，沒有綁定計算按鈕的onclick事件。。。

比如：

$('#bttn').on('click', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var $converted = ($outer_diameter * 3.75).toFixed(3);
    var $converted_2 = (($outer_diameter * 3.75) - (2 * ($inner_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
    })

    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();
    });

您可以提取一些方法來避免重復

Answer 1

問題是你有$('#error').hide()；在$('#inner_diameter').on('change'之外，function（）{因此，如果您這樣更改函數：

$('#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();
  })

工作如你所愿

對于第二個問題，沒有綁定計算按鈕的onclick事件。。。

比如：

$('#bttn').on('click', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var $converted = ($outer_diameter * 3.75).toFixed(3);
    var $converted_2 = (($outer_diameter * 3.75) - (2 * ($inner_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
    })

    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();
    });

您可以提取一些方法來避免重復

jQuery If語句消息

熱門問答

為scale_fill_distiller設置特定值

需要幫助加密/解密此格式的文件=>openssl aes-256-cbc-d -salt -pbkdf 2 -iter 10000-in encryptedfilename -out明文文件名

Excel計算正確，但顯示錯誤的結果

如何處理錯誤post route express js

如何獲取另一個集合中存在的數據

Flutter：TextFormField的位置計數器

LNMP 通過ip/項目名訪問不同的項目

如何確定活動的網絡接口媒體類型？

mybatis-plus sql報錯 Navicat正常執行

ora-01002:提取違反順序

python獲得文件名

關于前端的滾動框閃爍問題