Question

我有多个输入。将它们相乘并检查结果是否高于或低于某些值。该结果应打印警报。这只是第一步，因此我对我有警示，所以我可以向自己保证，结果是正确的。

输入

<span class="input input--haruki">
   <input class=".someClass" type="text" id="input-q1a" />
   <label class=".someClass" for="input-q1a"><span class=".someClass">Some text</span></label>
 </span>

Jquery的

var $htA = parseFloat($("#input-q1a").val(), 10);
var $avisA = ($htA *2);
var $euA = 0;
var $gaA = ($htA *3);

function exposeumfang() {
    if ($gaA <= 8) {
        $euA = 20;
    }  if ($gaA > 8 && $gaA <= 12) {
        $euA = 24;
    }  if ($gaA > 12 && $gaA <= 16) {
        $euA = 28;
    }  if ($gaA > 16 && $gaA <= 20) {
        $euA = 32;
    }  if ( $gaA >20 && $gaA <= 24) {
        $euA = 36;
    }  if ($gaA > 24 && $gaA <= 28) {
        $euA = 40;
    }  if ($gaA >28) {
        $euA = 44;
    }
    }
someButton.on('click', function(){
        alert('Some text ' + exposeumfang() + ' more text ' + $avisA + ' last bit of text.');
        });

我只对警报中的两个变量进行了未定义和NaN。我无法解决这个问题......：/ 我做错了什么？

Answer 1

您解析空输入的值并获取NaN。您应该在按钮单击时解析值。我更改了您的代码，以便在某些文字＆＃39;点击：

<span class="input input--haruki">
   <input class=".someClass" type="text" id="input-q1a" />
   <label class=".someClass" for="input-q1a"><span class=".someClass">Some text</span></label>
</span>

使用Javascript：

var $htA = parseFloat($("#input-q1a").val() != '' ? $("#input-q1a").val() : 0, 10);
var $avisA = ($htA * 2);
var $euA = 0;
var $gaA = ($htA * 3);

function exposeumfang() {
  $htA = parseFloat($("#input-q1a").val() != '' ? $("#input-q1a").val() : 0, 10);
  $avisA = ($htA * 2);
  $gaA = ($htA * 3);
  if ($gaA <= 8) {
    $euA = 20;
  }
  if ($gaA > 8 && $gaA <= 12) {
    $euA = 24;
  }
  if ($gaA > 12 && $gaA <= 16) {
    $euA = 28;
  }
  if ($gaA > 16 && $gaA <= 20) {
    $euA = 32;
  }
  if ($gaA > 20 && $gaA <= 24) {
    $euA = 36;
  }
  if ($gaA > 24 && $gaA <= 28) {
    $euA = 40;
  }
  if ($gaA > 28) {
    $euA = 44;
  }
}

$("label>span").on('click', function() {
  exposeumfang()
  alert('Some text ' + $euA + ' more text ' + $avisA + ' last bit of text.');
});

WORKING FIDDLE

的修改

我还修改了 $ htA 变量来检查输入值是否为空。如果它为空， parseFloat（...）返回NaN。

此检查是one line 'if-else'（或更具体地说是ternary operation）声明：

$("#input-q1a").val() != '' ? $("#input-q1a").val() : 0

如果输入值不为空，则将值传递给parseFloat函数，当它为空时，它传递0。

如果它是空的，可以修改为不调用parseFloat函数：

var $htA = $("#input-q1a").val() != '' ? parseFloat($("#input-q1a").val(), 10) : 0;

Answer 2

试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
exposeumfang();
$('#someButton').on('click', function(){
        var htA = parseFloat($("#input-q1a").val(), 10);
        var avisA = (htA *2);

        alert('Some text ' + exposeumfang(htA) + ' more text ' + avisA + ' last bit of text.');
        });
});

function exposeumfang(htA) {

var avisA = (htA *2);

var euA = 0;
var gaA = (htA *3);

    if (gaA <= 8) {
        euA = 20;
    }  if (gaA > 8 && gaA <= 12) {
        $euA = 24;
    }  if (gaA > 12 && gaA <= 16) {
        euA = 28;
    }  if (gaA > 16 && gaA <= 20) {
        euA = 32;
    }  if ( gaA >20 && gaA <= 24) {
        $euA = 36;
    }  if (gaA > 24 && gaA <= 28) {
        euA = 40;
    }  if (gaA >28) {
        euA = 44;
    }
    return euA;
}

</script>

<span class="input input--haruki">
   <input class=".someClass" type="text" id="input-q1a" />
   <label class=".someClass" for="input-q1a"><span class=".someClass">Some text</span></label>
   <button id = "someButton" >Submit</button>
 </span>

Answer 3

在每个if语句中添加一个return。

var $htA = parseFloat($(".input-q1a").val(), 10);
var $avisA = ($htA * 2);
var $euA = 0;
var $gaA = ($htA * 3);

function exposeumfang() {
  if ($gaA <= 8) {
    return $euA = 20;
  }
  if ($gaA > 8 && $gaA <= 12) {
    return $euA = 24;
  }
  if ($gaA > 12 && $gaA <= 16) {
    return $euA = 28;
  }
  if ($gaA > 16 && $gaA <= 20) {
    return $euA = 32;
  }
  if ($gaA > 20 && $gaA <= 24) {
    return $euA = 36;
  }
  if ($gaA > 24 && $gaA <= 28) {
    return $euA = 40;
  }
  if ($gaA > 28) {
    return $euA = 44;
  }
}
$("button").on('click', function() {
  alert('Some text ' + exposeumfang() + ' more text ' + $avisA + ' last bit of text.');
});

输入和打印的乘以值

3 个答案: