JQuery Показаны значения NaN

Question

У меня есть код ниже, работает нормально, но почему же jQuery возвращение $NaN, когда я запускаю его с помощью моей темы WordPress, используя форму ниже:

JQuery:

jQuery(document).ready(function($) { 

      var $span = $('.amount'), 
     originalPrice = +$span.text().substr(1); 

    $('.addon-select').change(function() { 
     var price = +$(this).find('option:selected').data('price'); 
     $span.text('$' + (price + originalPrice)); 
    }); 


    }); 

Пример HTML:

<select class="addon addon-select" name="addon-artwork"> 

       <option value="">Select an option...</option> 

       <option data-price="30.00" value="graphic-design-1" >Graphic Design (<span class="amount">&#36;30</span>)</option> 
       <option data-price="0.00" value="artwork-provided-2" >Artwork provided</option> 

</select> 
<span class="amount">$39</span> 

Answer 1

DEMO

NAN есть, потому что, когда выбран первый вариант data-price не определен.

проверьте, не выбрано ли значение выбранного элемента, а не if (this.value !== '') {..}, чем добавьте цену в диапазон.

и в остальное части, т.е. когда выбранное значение элемент '' чем использовать $span.text('$' + originalPrice);

jQuery(document).ready(function ($) { 

    var $span = $('.amount'); 
    var originalPrice = +$span.text().substr(1); 
    $('.addon-select').change(function() { 
     if (this.value !== '') { 
      var price = +$(this).find('option:selected').data('price'); 
      $span.text('$' + (price + originalPrice)); 
     }else{ 
      $span.text('$' + originalPrice); 
     } 

    }); 
}); 

Answer 2

NaN отображается только при выборе первого <option>, так как он не имеет атрибута data-price. Либо укажите его, либо добавьте специальный вариант для этой опции.