jQuery Ignoriere nicht definierte Variable

Question

Ich mache ein Ratgeber-Tool, das beim Addieren von Variablen in jQuery funktioniert.

Einige Antworten mit mehreren Antworten haben ein bestimmtes Datenattribut, das in einer bestimmten Variablen gespeichert werden muss. Wenn der Benutzer später auf dasselbe Datenattribut klickt, muss der Wert bis zum vorherigen Wert (der in einer Variablen gespeichert ist) addiert werden.

Das Problem: nicht jede Antwort hat ein Datenattribut. Jedes Mal, wenn ein Benutzer auf eine Antwort ohne Datenattribut klickt, ändert sich die Variable in "Nicht definiert" und es wird unbrauchbar.

ich eine kurze Version meines Code zu einem jsfiddle umgewandelt, das Problem zu demonstrieren:

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

Ich weiß nicht, ob es eine effizientere Möglichkeit, die Variablen zu berechnen. Wenn Sie einen kennen, würde ich mich freuen, es zu sehen! Aber bitte sei sanft, ich bin kein jQuery-Wizzard wie du :-)

Answer 1

können Sie verwenden oder || Operator funktioniert wie folgt:

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

du kannst es einfach als null so zählen (ich habe einen ternären Operator benutzt, aber du hättest einfach eine if/else-Anweisung verwenden können) :

// 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); 
});