jQuery Ignore Неопределенная переменная

Question

Я создаю советский инструмент, который работает над добавлением переменных в jQuery.

Некоторые ответы с несколькими вариантами ответов имеют специфический атрибут данных, который необходимо сохранить в определенной переменной. Если пользователь нажмет один и тот же атрибут данных позже, значение должно быть добавлено до предыдущего значения (которое хранится в var).

Проблема: не каждый ответ имеет атрибут данных. Каждый раз, когда пользователь нажимает на ответ без атрибута данных, переменная изменяется на «Undefined» и становится непригодной.

я преобразовал короткую версию моего кода на 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); 
});