0

我正在尝试创建一个简单的食品车；选项，即小，中，大和额外的，即奶酪，洋葱，辣椒。

我有一个计算数量的脚本，但是该脚本在每个食物项目的 while 循环内，我在使每个脚本调用都独一无二时遇到了一些困难。

这是我到目前为止所拥有的：http: //jsfiddle.net/2F8LA/1/

我尝试在 PHP 和 JS 中的每个 id 旁边使用 echo $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 />

谢谢哦，我现在有以下代码，但是，我不明白如何将“displayVals(ele)”连接到“displayVals($(this))”对不起，我是 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 />
4

3 回答 3

1

用这个：

<select id="options" name="options<?php echo $testnumber; ?>" class="options">

和：

<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
于 2013-03-27T08:47:55.187 回答
1

正如@Barmar 所指出的，将迭代次数添加到选择和输入中。

<select id="options" name="options-<?php echo $testnumber; ?>" class="options">

对输入做同样的事情......

<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

别忘了totalvalue跨度..

<span id="totalamount-<?php echo $testnumber; ?>">

您想要的一些函数，只需传入元素 asele并使用它来获取值。

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
}

现在将事件委托给文档。非静态元素需要利用 jQuery 的.on()方法绑定到静态元素。将元素传递$(this)给函数以执行计算。

$(document).on('change', 'select[name^=options]', function(){
    displayVals($(this));
});

$(document).on('click', 'input[name^=extra]', function(){
    calcUsage($(this));
});

这一切都应该正常工作。

编辑

不要在循环中使用它，只需放在头部，在脚​​本标签中，包裹在$(function(){//the javascrpit here });

于 2013-03-27T09:46:37.523 回答
0

感谢用户 Ohgodwhy 和 Fiverr 的某个人，我现在可以让脚本按预期工作。

我正在添加脚本以帮助任何寻找类似内容的人。

<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));
    });
});

function displayVals(ele) { // get option value
    calcUsage(ele);
    var singleValues = ele.val();
}

function calcUsage(ele) {
    var total = ele.parent().parent().find('#options').val(),
    $cbs = ele.parent().parent().find('input[name^="extra"]'),
    cnt = ele.prop('name').match(/\d/)[0];
    $cbs.each(function() {
        if(this.checked) total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
    });
    $("#totalamount-"+cnt).text(total); // display total
}
</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 />
<?php }while($testnumber > 0); ?>
<script type="text/javascript">
$('[id^=options]').each(function(){ displayVals($(this)); });
</script>
<hr />
于 2013-03-29T09:08:04.430 回答