jQuery - 每个循环通过数据属性选择所有项目，但也依赖于选择（选项）值答案

【问题标题】：jQuery - Each loop to select all items by data attribute, but also dependent on select (option) valuesjQuery - 每个循环通过数据属性选择所有项目，但也依赖于选择（选项）值
【发布时间】：2015-02-16 11:36:42
【问题描述】：

我正在建立一个电子商务商店，但我的实际产品页面在路上遇到了一个小障碍。根据如果选择会增加价格的任何产品选项集，我希望能够在添加这些选项后实时更新页面上的价格。我已经设法遍历每个元素，并附加了一个“data-price-effect”属性，但是，当涉及到 select 元素时，我需要检查该项目是否被选为option，每个选项当然都有各自的价格变化属性，但值只会更新到实际的 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 经验丰富的人的指点吗？

【问题讨论】：

您也应该发布您的 HTML 结构，以便人们可以看到您正在使用的内容
它实际上是具有数据属性的表单元素，但更新了问题。
select的选择标准是什么？
@Regent 如何在循环过程中有效地检查这个？在此期间将检查除选择之外的其他元素（输入、文本区域）。值和 onchange 触发是实际 select 元素的一部分，而不是您正在选择的 option （附加了 data 属性） )。如果可能的话，我希望它能够非常有效地工作，同时保持最小化。如果有的话，我找不到简单的解决方案。
@DannyVickers 过时的内联 JS 从一开始就不是好的解决方案。 Jamie Barker 已经开始回答了 - 我希望这个答案在更正后是正确的。

标签： javascript jquery loops attributes element

【解决方案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

【讨论】：

感谢您的回答，这就是我想在我的函数中有两个单独的循环，但是您的方法只会更新您更改的单个元素的价格，该函数需要运行检查所有这些以防止每次更新该元素时添加价格变化。不知道该怎么做，但可能仍然需要遍历所有元素。
你不需要每次都检查每个元素，你可以只保留一个运行总数吗？您可以将PriceEffect 设为全局变量吗？
其实scratch最后一条评论，select值每次都会变。 /Derp.
那会是那个单一的元素吗？没有办法从这个变量中删除旧的价格变化，它只会不断增加。
好吧，也许this fiddle 更接近真正需要的内容。