jQuery忽略未定义的变量

Question

我正在制作一个建议工具，可以在jQuery中添加变量。

某些多项选择答案具有特定的数据属性，需要将其保存到特定变量中。如果用户稍后单击相同的数据属性，则必须将该值添加到之前的值（存储在var中）。

问题：并非每个答案都有数据属性。每次用户点击没有数据属性的答案时，变量都会变为“未定义”，并且变得无法使用。

我将我的代码的简短版本转换为jsfiddle来演示问题：

// The default is 0
var count_health = 0;
var count_fat = 0;

$('.question div').click(function(){
  
  // I want to get the data from the answer
  var gather_health = $(this).attr("data-health");
  var gather_fat = $(this).attr("data-fat");
  
  // And add it up to the variable
  count_health = +count_health + +gather_health;
  count_fat = +count_fat + +gather_fat;
  
  // And show it
  $('.health').text('Your health is: ' + count_health);
  $('.fat').text('Your fat is: ' + count_fat);
});

.question div {
  background-color: #f4f4f4;
  padding: 5px;
  cursor: pointer;
  width: 50px;
  margin-top: 5px;
}

.health {
  display: block;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Shows health -->
<span class="health"></span>
<span class="fat"></span>

<!-- Questions & Answers -->
<div class="question">
  <h2>Do you run?</h2>
  <div data-health="1">Yes</div>
  <div>No</div>
</div>

<div class="question">
  <h2>Do you eat fruit?</h2>
  <div data-health="1">Yes</div>
  <div>No</div>
</div>

<div class="question">
  <h2>Do you eat chips?</h2>
  <div data-fat="1">Yes</div>
  <div>No</div>
</div>

我不知道是否有更有效的方法来计算变量。如果你知道一个，我会很高兴看到它！但请保持温和，我不像你们这样的jQuery wizzard： - ）

Answer 1

你可以像这样把它算作零（我使用了三元运算符，但你可以很容易地使用if / else语句）：

// The default is 0
var count_health = 0;
var count_fat = 0;

$('.question div').click(function(){

  // I want to get the data from the answer
  var gather_health = (typeof $(this).attr("data-health") != "undefined") ? $(this).attr("data-health") : 0;
  var gather_fat = (typeof $(this).attr("data-fat") != "undefined") ? $(this).attr("data-fat") : 0;

  // And add it up to the variable
  count_health = +count_health + +gather_health;
  count_fat = +count_fat + +gather_fat;

  // And show it
  $('.health').text('Your health is: ' + count_health);
  $('.fat').text('Your fat is: ' + count_fat);
});

Answer 2

您可以像这样使用OR ||运算符：

var gather_health = $(this).attr("data-health") || 0; // or "" or any default set

// The default is 0
var count_health = 0;
var count_fat = 0;

$('.question div').click(function(){
  
  // I want to get the data from the answer
  var gather_health = $(this).attr("data-health") || 0;//<=== if attribute value is NaN set value to be 0
  var gather_fat = $(this).attr("data-fat") || 0;//the same here
  
  // And add it up to the variable
  count_health = +count_health + +gather_health;
  count_fat = +count_fat + +gather_fat;
  
  // And show it
  $('.health').text('Your health is: ' + count_health);
  $('.fat').text('Your fat is: ' + count_fat);
});

.question div {
  background-color: #f4f4f4;
  padding: 5px;
  cursor: pointer;
  width: 50px;
  margin-top: 5px;
}

.health {
  display: block;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Shows health -->
<span class="health"></span>
<span class="fat"></span>

<!-- Questions & Answers -->
<div class="question">
  <h2>Do you run?</h2>
  <div data-health="1">Yes</div>
  <div>No</div>
</div>

<div class="question">
  <h2>Do you eat fruit?</h2>
  <div data-health="1">Yes</div>
  <div>No</div>
</div>

<div class="question">
  <h2>Do you eat chips?</h2>
  <div data-fat="1">Yes</div>
  <div>No</div>
</div>