我试图创建一个简单的食物车,它有;选项即小,中,大和额外部分,即干酪,洋葱,辣椒。PHP循环内的Jquery使得唯一
我有一个脚本,它计算的数额却脚本是每个食品while循环中,我有一些困难,使每次通话独特的脚本。
这是我到目前为止有:http://jsfiddle.net/2F8LA/1/
我一直在使用旁边的PHP和JS中的每个ID回声$ testnumber使他们唯一的,但试了,这是行不通的。我想我在一个小我在我的头上:)
我怎样才能让每一个循环的独特吗?提前致谢。
<?php
$testnumber = 5;
?>
<?php do { ?>
<?php $testnumber -= 1;?>
<hr />
<div>
<div>
<select id="options" name="options" class="options">
<option value="10.00">$10.00</option>
<option value="20.50">$20.50</option>
<option value="30.80">$30.80</option>
</select><span style="margin-left:30px;">TOTAL: $<span id="totalamount"> </span></span>
</div>
<br />
<div>
<input type="checkbox" name="extra" value="0.50" />$0.50
<input type="checkbox" name="extra" value="1.50" />$1.50
<input type="checkbox" name="extra" value="0.80" />$0.80
</div>
</div><br />
<script type="text/javascript">
// for adding the options and extras
function displayVals() { // get option value
calcUsage();
var singleValues = $("#options").val();
}
var $cbs = $('input[name="extra"]');
function calcUsage() {
var total = $("#options").val();
$cbs.each(function() {
if(this.checked)
total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
});
$("#totalamount").text(total); // display total
}
$("#options").change(displayVals);
displayVals();
//For checkboxes
$cbs.click(calcUsage);
</script>
<?php }while($testnumber > 0); ?>
<hr />
谢谢Ohgodwhy我现在有下面的代码,但是,我不知道如何连接“displayVals(ELE)”到“displayVals($(本))”对不起,我是新来的jQuery的/的JavaScript。
如果你没有时间来解释我的理解,但是,如果你有一个链接到的地方我可以了解这意味着什么,这将是巨大的。
<head>
<script type="text/javascript" src="scripts/jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('change', 'select[name^=options]', function(){
displayVals($(this));
});
$(document).on('click', 'input[name^=extra]', function(){
calcUsage($(this));
});
});
</script>
</head>
<?php $testnumber = 5; ?>
<?php do { ?>
<?php $testnumber -= 1; ?>
<hr />
<div>
<div>
<select id="options" name="options-<?php echo $testnumber; ?>" class="options">
<option value="10.00">$10.00</option>
<option value="20.50">$20.50</option>
<option value="30.80">$30.80</option>
</select><span style="margin-left:30px;">TOTAL: $<span id="totalamount-<?php echo $testnumber; ?>"> </span></span>
</div>
<br />
<div>
<input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.50" />$0.50
<input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="1.50" />$1.50
<input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.80" />$0.80
</div>
</div><br />
<script type="text/javascript">
function displayVals(ele) { // get option value
calcUsage(ele);
var singleValues = ele.val();
}
function calcUsage(ele) {
var total = ele.val(),
$cbs = ele.parent().parent().find('input[name="^extra"]'),
cnt = cbs.prop('name').split('-')[1]; // the iteration number
$cbs.each(function() {
if(this.checked) total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
});
$("#totalamount-"+cnt).text(total); // display total
}
</script>
<?php }while($testnumber > 0); ?>
<hr />
实际上,除此之外还有更多。我没有注意到你正在循环中生成你的JS,这通常不正确。你真正应该做的就是使用类和DOM遍历来找到相关的选项和附加内容,然后为每件事都设置一组函数。这是比我现在想要做的更多的编码,你真的应该学习jQuery并找出如何自己做。 – Barmar 2013-03-27 08:56:31
感谢您尝试Barmar,感谢您的时间。 – monsterboy 2013-03-27 10:28:11