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

您可以使用或||運營商像這樣工作的：

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>

Answer 2

你可以把它算作零，就像這樣（我使用了三元運算符，但你可以簡單地使用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); 
});