动态抓取输入/选择值而不直接瞄准- Javascript
Dynamically grabbing input / select values without direct targeting - Javascript
我有一组列表项,其中包含输入和选择框。我试图通过列表项循环,抓住它们里面的值,然后运行一个基于这些数字的函数,结果推入数组。不幸的是,我正在努力使我的点击功能的结构正确。
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>
任何方向都很棒!
DjQueryElement.each( ... )
接受一个带有2个参数的函数引用,第一个参数是索引,第二个参数是元素。好好利用这个元素。
$('#calculation-options li').each( function( i, elem ) {
console.log( $(elem).find( 'option:selected' ) );
} );
相关文章:
- 我怎样才能得到“__类型“;用javascript输入json
- 如何获取javascript输入并在html中调用它
- JavaScript - 输入按钮隐藏 - 不起作用
- 选中复选框时启用Javascript输入类型,未选中复选框则禁用
- JavaScript-输入不是数字时提示
- Javascript:输入框-自动大写第一个字母,但可以重写
- Javascript输入格式
- 来自键盘的JavaScript输入没有“prompt()”方法弹出窗口(如Pascal Readln或GWiBasic输
- JavaScript 输入值问题
- Javascript输入更改
- Javascript输入问题
- JavaScript 输入字段不可编辑
- 动态生成的 Javascript 输入字段无法被 Httpservletrequest 识别???仅在 Chrome 中
- JavaScript 输入标签未设置 ID 或类
- JavaScript 输入字段验证
- 如何使用 javascript 输入 2 个框
- 直接从Javascript输入/传递图像到输入类型=“文件名”
- 如何显示双引号以通过javascript输入
- HTML5/Javascript 输入只读状态在 IOS 上使用 XCode 滑动
- Javascript 输入到 HTML 表单 onSubmit 与 # 操作到 PHP $_GET(同一文件上的所有代码