Stackoverflow 社区您好,
我目前正在尝试实现以下 fiddle :http://jsfiddle.net/8D3tJ/2/在我的一个项目中,主要区别是我没有使用选择选项,而是使用输入字段/单选按钮。
请查看我的代码:
<li id="fo143li1" class="notranslate focused">
<fieldset>
<div class="price-option">
<input id="radioDefault_1" name="Field1" type="hidden" value="">
<span>
<div class="price" style="float: right; margin-top: 5px;"></div>
<input id="Field1_0" name="Field1" data-price="5" type="radio" class="field radio" value="5" tabindex="1">
<label class="choice" for="Field1_0">
First Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_1" name="Field1" type="radio" class="field radio" value="Second Choice" tabindex="2">
<label class="choice" for="Field1_1">
Second Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_2" name="Field1" type="radio" class="field radio" value="Third Choice" tabindex="3">
<label class="choice" for="Field1_2">
Third Choice</label>
</span>
</div>
</fieldset>
</li>
</ul>
</form>
<p class="result" data-base-price="50">£<span>50.00</span></p>
这是我编辑的 jquery 部分:
<script type="text/javascript">
$(document).ready(function () {
$('.price-option').change(function(){
var price = parseFloat($('.price').data('base-price'));
$('.price-option').each(function(i, el) {
price += parseFloat($('checked:checked', el).data('price'));
});
$('.result span').text(price.toFixed(2));
});
});
</script>
如果我要根据上面的标记尝试此方法,我将返回 NaN 值。 我有什么想法可以让它发挥作用吗?一些专家的帮助将不胜感激。
最佳答案
<li id="fo143li1" class="notranslate focused">
<fieldset>
<div class="price-option">
<input id="radioDefault_1" name="Field1" type="hidden" value="">
<span>
<div class="price" style="float: right; margin-top: 5px;"></div>
<input id="Field1_0" name="Field1" data-price="5" type="radio" class="field radio" value="5" tabindex="1">
<label class="choice" for="Field1_0">
First Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_1" name="Field1" type="radio" data-price="10" class="field radio" value="Second Choice" tabindex="2">
<label class="choice" for="Field1_1">
Second Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_2" name="Field1" type="radio" class="field radio" data-price="15" value="Third Choice" tabindex="3">
<label class="choice" for="Field1_2">
Third Choice</label>
</span>
</div>
</fieldset>
</li>
</ul>
</form>
<p class="result" data-base-price="50">£<span>50.00</span></p>
在js中
$(document).ready(function () {
$('.radio').change(function(){
var price= parseFloat($('.result').data('base-price'));
$('.radio').each(function(i, el) {
if($(this).is(":checked"))
price += parseFloat($(this).data('price'));
// console.log(parseFloat($(this).data('price')));
});
$('.result span').text(price.toFixed(2));
});
});
检查 fiddle 在这里http://jsfiddle.net/C4Lrg/
关于javascript - 使用单选按钮进行 jquery 计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22095559/