wordpress - jQuery Showing NaN value -
i have code below working fine why jquery
returning $nan
when run via wordpress theme using format below:
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)); }); });
sample html:
<select class="addon addon-select" name="addon-artwork"> <option value="">select option...</option> <option data-price="30.00" value="graphic-design-1" >graphic design (<span class="amount">$30</span>)</option> <option data-price="0.00" value="artwork-provided-2" >artwork provided</option> </select> <span class="amount">$39</span>
nan
there because when 1st option selected data-price
not defined.
check if value of selected item not null if (this.value !== '') {..}
add price span.
and in else part i.e when selected item value ''
use $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); } }); });
Comments
Post a Comment