javascript - 动态抓取输入/选择值而不直接定位 - Javascript

Question

我有一组列表项，其中包含输入和选择框。我试图循环遍历列表项，获取其中的值，然后根据这些数字运行一个函数，并将结果插入数组中。不幸的是，我正在努力让我的点击功能的结构正确。

计算功能

function calculateSum(power, amountItem, usage) {
    var finalSum;

    if (power && amountItem && usage != null) {
        finalSum = (power * amountItem * usage)/1000;
    } else {
        console.log('Parameters not passed into calculateSum function');
    }
    return finalSum;
};

点击功能 - 我遇到困难的部分。

   calculationsArray = [];
    $('#calculate-this').on('click', function(){
          $('#calculation-options li').each( function() {
                 var power = $('.wattage select').val();
                 var amount = $('.quantity-output').val();
                 var usage = $('.usage select').val();
                 var calculationResult = calculateSum(power, amount,usage);
                 console.log(calculationResult);
                 calculationsArray.push(calculationResult);
           });
    });

HTML Li 结构示例

<ul id="calculation-options">           
<li id="item-1">
    <div>
        <img data-name="item-1" id="item-1" src="img/item1.png" alt="Begin Process"/>
    </div>                          
        <div class="controls-wrapper">
            <div class="controls-wrapper-inner">
              <input name="quantity" class="quantity-output quantity-value-1" value="5">
                  <div class="controls-wrapper-selector">
                    <a data-id="1" class="minus">-</a>
                    <a data-id="1" class="plus">+</a>
                  </div>
            </div>
        </div>
        <div class="power">
            <select>
              <option selected="selected" value="POWER">Power</option>  
              <option value="70">70w</option>
              <option value="100">100w</option>
            </select>
        </div>
        <div class="Usage">
            <select>
              <option selected="selected" value="usage">Usage</option>  
              <option value="1">1 Hours</option>
              <option value="2">2 Hours</option>
            </select>
        </div>
</li>
<li id="item-2">
    <div>
        <img data-name="item-2" id="item-2" src="img/item2.png" alt="Begin Process"/>
    </div>                          
        <div class="controls-wrapper">
            <div class="controls-wrapper-inner">
              <input name="quantity" class="quantity-output quantity-value-1" value="5">
                  <div class="controls-wrapper-selector">
                    <a data-id="1" class="minus">-</a>
                    <a data-id="1" class="plus">+</a>
                  </div>
            </div>
        </div>
        <div class="power">
            <select>
              <option selected="selected" value="POWER">Power</option>  
              <option value="70">70w</option>
              <option value="100">100w</option>
            </select>
        </div>
        <div class="Usage">
            <select>
              <option selected="selected" value="usage">Usage</option>  
              <option value="1">1 Hours</option>
              <option value="2">2 Hours</option>
            </select>
        </div>
</li>
</ul>
<a id="calculate-this">Calculate This!</a>

任何方向都很棒!

D

Answer 1

jQueryElement.each( ... ) 采用带有 2 个参数的函数引用，第一个是索引，第二个是元素。利用这个元素来发挥你的优势。

$('#calculation-options li').each( function( i, elem ) {
  console.log( $(elem).find( 'option:selected' ) );
} );