2013-03-27 30 views
0

我试图创建一个简单的食物车,它有;选项即小,中,大和额外部分,即干酪,洋葱,辣椒。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 /> 

回答

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 /> 
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 
+1

实际上,除此之外还有更多。我没有注意到你正在循环中生成你的JS,这通常不正确。你真正应该做的就是使用类和DOM遍历来找到相关的选项和附加内容,然后为每件事都设置一组函数。这是比我现在想要做的更多的编码,你真的应该学习jQuery并找出如何自己做。 – Barmar 2013-03-27 08:56:31

+0

感谢您尝试Barmar,感谢您的时间。 – monsterboy 2013-03-27 10:28:11

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; ?>"> 

你想要的某些功能,只是通过在元素作为ele并使用它来获取值。

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

+0

谢谢Ohgodwhy真的非常感谢您的帮助和时间,我已经将我的当前代码更新为原始文章,如果您有时间,请提供问题。 _great用户名btw_ – monsterboy 2013-03-27 10:24:57

+1

@monsterboy当您将'$(this)'传递给函数时,您发送的是引用事件发生元素的实际jQuery对象。将某些东西传递给函数时,它被称为“参数”。你可以阅读更多关于[在MDN上的参数](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments)。所以'ele'实际上就是'change'事件或'click'事件被触发的对象。 – Ohgodwhy 2013-03-27 10:34:18

+0

感谢您的链接,我会检查出来。那么,我是否认为我上面输入的更新代码应该可以正常工作,而无需额外的代码?正如,我发现了以下错误:未捕获 引用错误:不定义CBS testloop.php:178 calcUsage testloop.php:178个 displayVals testloop.php:171 (匿名函数)testloop.php:6 的jQuery .event.dispatch jquery-1.9.1.js:3074 elemData.handle – monsterboy 2013-03-27 10:43:26