Question

我在下面的代码工作正常，但为什么jQuery在我使用以下格式通过wordpress主题运行时返回$NaN：

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

仅当选择了第一个NaN时才会显示

<option>，因为它没有data-price属性。给它一个或为该选项添加一个特例。

Answer 2

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

    });
});

jQuery显示NaN值

2 个答案: