javascript - 如何使用 jQuery 正确比较两个数字？

Question

我想比较两个 int 数字，但函数总是说数字不同。我已经尝试使用不同的比较符号(== 和 ===)但没有成功。

我做错了什么？

$('.check').click(function() {
  var number1 = parseInt($('.number1').text());
  var number2 = parseInt($('.number2').text());
  var testPassed = $('.test').css('background-color','green');
  var testFailed = $('.test').css('background-color','red');
  var resultG = $('.result').html('It is the same number!');
  var resultNG = $('.result').html('The numbers are different!');
  
	if(number1 === number2) {
  	testPassed;
    resultG;
  } else {
  	testFailed;
    resultNG;
  }
})

.test {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 50%;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="number1">10</p>
<p class="number2">10</p>
<button class="check">Check</button>
<div class="test"></div>
<p class="result"></p>

如果我将 -10 放入 $('.number1') 中，我应该怎么做才能获得“真实”结果？
此外，如果我使用 Math.abs(number1) 将其强制为正数，则不会发生任何变化，而且我总是得到“假”结果。

我很确定我在比较本身做错了什么。

Answer 1

  var testPassed = $('.test').css('background-color','green');
  var testFailed = $('.test').css('background-color','red');
  var resultG = $('.result').html('It is the same number!');
  var resultNG = $('.result').html('The numbers are different!');

这些是您正在调用的函数，它们立即就位，唯一存储在变量名称中的是返回值。这当然意味着背景是红色的，这是你最后设置的。文字当然是“数字不同!”这是您设置的最后一件事。

数字完全相同，如果您将它们与 == 或 === 进行比较，它们将返回 true。

只需将赋值代码移至 if 语句本身即可。

    $('.check').click(function() {
  var number1 = parseInt($('.number1').text());
  var number2 = parseInt($('.number2').text());

    if(number1 === number2) {
    $('.test').css('background-color','green');
    $('.result').html('It is the same number!');
  } else {
    $('.test').css('background-color','red');
    $('.result').html('The numbers are different!');
  }
})

$('.check').click(function() {
  var number1 = parseInt($('.number1').text());
  var number2 = parseInt($('.number2').text());

	if(number1 === number2) {
  	$('.test').css('background-color','green');
    $('.result').html('It is the same number!');
  } else {
  	$('.test').css('background-color','red');
    $('.result').html('The numbers are different!');
  }
})

.test {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 50%;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="number1">10</p>
<p class="number2">10</p>
<button class="check">Check</button>
<div class="test"></div>
<p class="result"></p>