javascript - javascript更新产品总数

Question

我有一种方法可以<span class="amount">$39</span>在选择下拉值时自动更新价格 div () ( <option data-price="30.00" value="graphic-design-1">Graphic Design ($30)</option>)

上述两个选项值都是动态的，并且是一个 woocommerce 插件，我需要计划在未来的版本中使用它，但我现在需要它

价格将是69 美元

下拉菜单的结构是：

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

Answer 1

var span = document.getElementsByClassName('amount')[0];
var select = document.getElementsByClassName('addon-select')[0];
var originalPrice = +span.textContent.substr(1);

select.addEventListener('change', function () {
    var price = +select.options[ select.selectedIndex ].getAttribute('data-price');
    span.textContent = '$' + (price + originalPrice);
}, false);

这是小提琴：http: //jsfiddle.net/zgd8G/

---

如果您使用的是 jQuery，则可以将其缩短为：

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

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

这是小提琴：http: //jsfiddle.net/zgd8G/1/