javascript - jQuery - 每个循环按数据属性选择所有项目，但也依赖于选择(选项)值

Question

我正在建立一家电子商务商店，并且在我的实际产品页面上遇到了一个小障碍。根据选择后会添加到价格的任何产品选项集，我希望能够在添加这些选项后实时更新页面上的价格。我已经设法迭代每个带有“数据价格效果”属性的元素，但是，当涉及 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