Question

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

我做错了什么？

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我应该怎么做才能得到真正的＆＃34;结果如果我把-10放入$('.number1')？
此外，如果我使用Math.abs(number1)强制它成为正数而没有任何改变，我总是得到一个＆＃34; false＆＃34;结果

我非常确定我在比较中做错了什么。

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>

Answer 2

这样的行：

testPassed;
resultG;

不要做任何事情。它们只是确认存在该名称的变量（如果处于严格模式），然后继续执行下一行。他们没有采取某些行动。

这样的行：

var testPassed = $('.test').css('background-color','green');

做做点什么。他们找到了类test的元素，并将其背景颜色设置为绿色。

由于您的“失败”操作在“通过”操作后执行，看起来测试总是失败。

解决方案：将操作移至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!');
  }
})

.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>

Answer 3

这样做意味着执行这些行。所以将这些行写在你希望它们执行的地方

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!');

在这里使用代码笔here

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


    if(number1 === number2) {
    var testPassed = $('.test').css('background-color','green');
    var resultG = $('.result').html('It is the same number!');
  } else {

  var testFailed = $('.test').css('background-color','red');

  var resultNG = $('.result').html('The numbers are different!');
  }
}

)

Answer 4

我做了一些改变。请参阅以下内容：

$('.check').click(function() {
  var number1 = parseInt($('.number1').text());
  var number2 = parseInt($('.number2').text());
  
	if(number1 == number2) {
  	  var testPassed = $('.test').css('background-color','green');
   var resultG = $('.result').html('It is the same number!');
  } else {
  	testFailed; 
    var testFailed = $('.test').css('background-color','red');
     var resultNG = $('.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>

Answer 5

条件已在if和else块中正确评估，且两个数字相等。

但问题，当你写：

if(number1 === number2) {
    testPassed;
    resultG;
} else {
    testFailed;
    resultNG;
}

你没有做任何事情，这些都不是正确的陈述，你只是指变量。

<强>解决方案：

不是将它们分配给变量，而是需要将这些分配移动到条件块中的正确位置：

$('.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>

如何正确地比较两个数字与jQuery？

5 个答案: