jQuery

Question

我正在建立一个电子商务商店，并且在我的实际产品页面的道路上遇到了一个小障碍。基于如果 selected 会增加价格的任何产品选项集，我希望能够在添加这些选项后实时更新页面上的价格。我已经设法遍历每个附加了 "data-price-effect" 属性的元素，但是，当涉及到 select 元素时，我需要检查是否该商品被 select 编辑为选项，当然每个选项都有其各自的价格变化属性，但该值只会更新为实际的 select 元素.

到目前为止，这是我的代码：

function updatePrice(){
    $('[data-price-effect]').each(function( index ) {
        // do something
    });
}

基本 HTML 设置进一步解释：

<form>
    <input type="text" name="foo" onchange="updatePrice();" data-price-effect="10.00" />

    <select name="bar" onchange="updatePrice();">
        <option selected value="Item1" data-price-effect="5.00">Item 1</option>
        <option selected value="Item2" data-price-effect="8.00">Item 2</option>
        <option selected value="Item3" data-price-effect="10.00">Item 3</option>
    </select>
</form>

我什至不知道如何从逻辑上做到这一点，即使是一些巨大的混乱代码。 Javascript?

方面更有经验的人的任何指示

Answer 1

您可以为函数的所有表单元素设置一个侦听器，而不是在每个元素上设置 "updatePrice()"：

var EffectElements = $('form input[data-price-effect], form select');
EffectElements.on('change', function() {
    var PriceEffect = 0;
    EffectElements.each(function() { // Loop through elements
        if ($(this).is('select')) { //if this element is a select
            $(this).children().each(function() { //Loop through the child elements (options)
                if ($(this).is(':selected')) { //if this option is selected
                    PriceEffect += parseFloat($(this).attr('data-price-effect'));
                }
            });
        } else {
            PriceEffect += parseFloat($(this).attr('data-price-effect'));
        }
    });
});

然后您可以使用 PriceEffect 变量更新网站上的价格。

最终是 IS 函数完成了您需要的肮脏工作 ~_o

Working Example

jQuery - 每个循环到 select 所有项目的数据属性，但也依赖于 select（选项）值

jQuery - Each loop to select all items by data attribute, but also dependent on select (option) values

javascript

loops

attributes

element