jQuery循环?克隆?只是为什么? [英] jQuery Loop? Clone? Simply WHY?
问题描述
新版本(不是新问题...)
因此,我遇到了一个.click();
和.html();
的循环"问题.
检索XML数据:确定
function afficher(NomPizz, Prix1, Prix2, Prix3) {//HERE IS MY CODE//});
将它们打印到屏幕上:确定
$('#pricecontainer').show(); //Display my container and put values in with .html();
$('#prix1').html('SOLO 1P<p id="p1" style="line-height:10px;">' + Prix1.toFixed(2) + '</p>');
$('#prix2').html('MAXI 2P<p id="p2" style="line-height:10px;">' + Prix2.toFixed(2) + '</p>');
$('#prix3').html('SUPER 4P<p id="p3" style="line-height:10px;">' + Prix3.toFixed(2) + '</p>');
点击后将值附加到其他div:确定,但否
一切正常……一次!当我单击更多次时,值克隆"本身.
因此,如果我单击一次:我添加了1个项目.
我得到了: 1好
两次单击.
我得到了 3 ,上一个和另外两个!
单击三次.
我有 6 ,前三个和更多!
等等...等等...
我将这段代码放入 INTO 我的function afficher();
我找到的唯一解决方案...不好!
$("clickedItemId").click(function() {
var Figure = $(this).find('p').html();
totalArea.value += '+' + Figure;
var Screen = totalArea.value.replace(/'/g, ' ');
var result = eval(Screen);
totalArea.value = result;
var $newItem = "<span style='float:left'>1 " + NomPizz.toUpperCase() + "</span><span style='float:right'>" + Figure + "</span><br/>";
$('<div><div>').html($newItem).appendTo(RecapTick);
Display2.value = "TOTAL (EUR): " + totalArea.value;
$('#pricecontainer').hide();
});
因此,我的function afficher();
的整个代码为:
function afficher(NomPizz, Prix1, Prix2, Prix3) {
var totalArea = document.getElementById('totalArea');
var Display2 = document.getElementById('Display2');
var RecapTick = document.getElementById('MidTiTx');
$('#pricecontainer').show();
$('#prix1').html('SOLO 1P<p id="p1" style="line-height:10px;">' + Prix1.toFixed(2) + '</p>');
$('#prix2').html('MAXI 2P<p id="p2" style="line-height:10px;">' + Prix2.toFixed(2) + '</p>');
$('#prix3').html('SUPER 4P<p id="p3" style="line-height:10px;">' + Prix3.toFixed(2) + '</p>');
//BUG HERRERRERERERERER
$("clickedItemId").click(function() {
var Figure = $(this).find('p').html();
totalArea.value += '+' + Figure;
var Screen = totalArea.value.replace(/'/g, ' ');
var result = eval(Screen);
totalArea.value = result;
var $newItem = "<span style='float:left'>1 " + NomPizz.toUpperCase() + "</span><span style='float:right'>" + Figure + "</span><br/>";
$('<div><div>').html($newItem).appendTo(RecapTick);
Display2.value = "TOTAL (EUR): " + totalArea.value;
$('#pricecontainer').hide();
});
};
我在此保留旧版本的PS(与其他代码相同的pb):
所以,我的问题如下:
[实时演示] [1]
编辑:[下载源] [2]
这是一个简单的购物车,可从xml检索产品列表 文件. 这部分有效!
单击它们后,产品将添加到下面的列表中,但是当 您在同一位置上反复单击,则应将这些总数相加 ... 这就是我被困住的地方!
我试图更改第62行:
tot = parseInt(jQuery(this).find('.prow').html());
收件人:
tot = parseInt(jQuery(this).find('.prow').html()+1);
但是不起作用...我认为问题是我正在使用. .click(); 和 onclick =" 方法???还是因为" var "使用不当?
请有人启发我!
这是我的jsCode:
function calculate(){ var tot = 0; jQuery(".totprice").each(function(e,b){ tot += parseInt(jQuery(this).text()); }); return jQuery("#amt").html("$"+tot); } function showprod(){ jQuery(".prod").each(function(e){ jQuery(this).delay(500*e).fadeIn('fast'); }); } function clearcart(){ jQuery("#clear").live('click',function(){ jQuery(".tetew").fadeIn(4000,function(){ jQuery(this).remove(); calculate(); }); }); } function delete_ajax(){ jQuery(".del").live('click',function(e){ var a = jQuery(this); var p = a.parent().parent().parent().parent().parent(); if(p){ p.fadeOut('slow',function(){ jQuery(this).remove(); calculate(); }); } }); } function addtocart(){ jQuery(".addtocart").click(function(e){ var getprod = jQuery(this).attr("prodid"); var getval = jQuery(this).attr("prodval"); jQuery("#msg").fadeIn('slow'); jQuery.ajax({ type:'GET', url:'db.xml', dataType:'xml', success: function(xml){ jQuery(xml).find('databases').each(function(){ jQuery(this).find('prod').each(function(e){ var db_id = jQuery(this).attr('id'); jQuery("#msg").fadeOut('slow'); if(getprod == db_id){ var cookies = 1; jQuery(".tetew").each(function(){ var _this = jQuery(this); var _store = _this.find('.pstore'); var ident = _this.find('.pqty'); if(getprod == ident.text()){ var tot = parseInt(jQuery(this).find('.prow').html()); //Put a +1 here won't work... jQuery(this).find('.prow').html(tot); var restot = parseInt(jQuery(this).find('.prow').text()) * parseInt(jQuery(this).find('.price').text()); jQuery(this).find('.totprice').html(restot); cookies = 0; return false; }else{ cookies = 1; } }); if(cookies == 1){ var results = "<div class='tetew'>"; results +="<table>"; results +="<tr>"; results +="<td class='pqty' style='display:none' valign='top'>" + jQuery(this).attr("id") + "</td>"; results +="<td class='img' valign='top'><img src='" + jQuery(this).attr('img') + "' width='40' height='40' /></td>"; results +="<td class='pstore' valign='top'>" + jQuery(this).text() + "</td>"; results +="<td class='prow' valign='top'>1</td>"; results +="<td class='price' valign='top'>" + jQuery(this).attr('price') + "</td>"; results +="<td class='totprice' valign='top'>" + jQuery(this).attr('price') + "</td>"; results +="<td valign='top'><a href='javascript:void(0)' class='del'>Delete</a></td>"; results +="</tr>"; results +="</table>"; results +="</div>"; } jQuery(".tetew:eq("+e+")").hide().fadeIn('fast'); jQuery("#addto").append(results); calculate(); return false; } }); }); } }); }); } function loadXMLdb() { $.ajax({ type: "GET", url: "db.xml", dataType: "xml", success: function(xml) { $(xml).find('prod').each(function() { var _Nom = jQuery(this).text(); var Col1 = jQuery(this).attr('id'); var Col2 = jQuery(this).attr('price'); var Col3 = $(this).find('grand').text(); $('<div class="prod" style="display:block;" onclick="addtocart();"></div>').html(_Nom + '<br /><img
src ="images/pizza.png">
Ajouter').appendTo(.vprod");}); } }); } jQuery(document).ready(function(){ showprod(); clearcart(); addtocart(); delete_ajax(); loadXMLdb(); });
[1]: http://bzez.0fees.net/examples/jCart/ [2]: http://bzez.0fees.net/examples/jCart/jCart.zip
看来您的购物车只会反映xml文件中的内容,因此其中每个项目只能包含1个.我建议您以不同的方式看待您的问题.
尝试这样的事情:
var cart = [];
var items = [
{id:1, price:100, name:"Catch Arena"},
{id:2, price:400, name:"Pepperonni"},
{id:3, price:1400, name:"Fruits de Mer"},
{id:4, price:1400, name:"Chickenita"},
];
然后,使用以下命令将商品添加到购物车中:
<a href="#" onclick="addToCart(0);">Add Catch Arena</a>
<a href="#" onclick="addToCart(1);">Add Pepperonni</a>
<a href="#" onclick="addToCart(2);">Add Fruits de Mer</a>
<a href="#" onclick="addToCart(3);">Add Chickenita</a>
我到这里的addToCart使用数组的索引(从零开始):
window.addToCart = function(idx) {
cart.push(items[idx]);
displayCart();
};
现在您有了购物车,需要显示它:
<div id="ShoppingCart">Your cart is empty</div>
<div id="total"></div>
...
window.displayCart = function() {
var cartHtml = [];
var cartTotal = 0;
for (i=0; i<cart.length; i++) {
cartHtml.push("<div>" + cart[i].name + ", " + cart[i].price + "</div>");
cartTotal += cart[i].price;
}
$('#total').html(cartTotal);
$('#ShoppingCart').html(cartHtml.join(''));
};
我已经在jsfiddle中运行它: http://jsfiddle.net/R4rzC/
我也不会说这是最佳实践,因为购物车可能应该与后端数据库等同步,但是我敢说有一个原因使您实现购物车是js,可能是出于技术原因! /p>
NEW VERSION (not new problem...)
So, i got a "loop" problem with a .click();
and a .html();
.
Retrieve XML datas: OK
function afficher(NomPizz, Prix1, Prix2, Prix3) {//HERE IS MY CODE//});
Print them to screen: OK
$('#pricecontainer').show(); //Display my container and put values in with .html();
$('#prix1').html('SOLO 1P<p id="p1" style="line-height:10px;">' + Prix1.toFixed(2) + '</p>');
$('#prix2').html('MAXI 2P<p id="p2" style="line-height:10px;">' + Prix2.toFixed(2) + '</p>');
$('#prix3').html('SUPER 4P<p id="p3" style="line-height:10px;">' + Prix3.toFixed(2) + '</p>');
Append value to other div when clicked: OK but NOT
Everithing works... ONCE ! When I click more times, the value "clone" itself.
So, if I click one time: 1 Items i added.
I got: 1 OK
Two times click.
I got 3, The previous one and TWO MORE !
Three times click.
I got 6, The three previous and THRE MORE !
Etc... Etc...
I Put this code INTO my function afficher();
The only one solution i've found... BAD one !
$("clickedItemId").click(function() {
var Figure = $(this).find('p').html();
totalArea.value += '+' + Figure;
var Screen = totalArea.value.replace(/'/g, ' ');
var result = eval(Screen);
totalArea.value = result;
var $newItem = "<span style='float:left'>1 " + NomPizz.toUpperCase() + "</span><span style='float:right'>" + Figure + "</span><br/>";
$('<div><div>').html($newItem).appendTo(RecapTick);
Display2.value = "TOTAL (EUR): " + totalArea.value;
$('#pricecontainer').hide();
});
So, the ENTIRE code of my function afficher();
will be:
function afficher(NomPizz, Prix1, Prix2, Prix3) {
var totalArea = document.getElementById('totalArea');
var Display2 = document.getElementById('Display2');
var RecapTick = document.getElementById('MidTiTx');
$('#pricecontainer').show();
$('#prix1').html('SOLO 1P<p id="p1" style="line-height:10px;">' + Prix1.toFixed(2) + '</p>');
$('#prix2').html('MAXI 2P<p id="p2" style="line-height:10px;">' + Prix2.toFixed(2) + '</p>');
$('#prix3').html('SUPER 4P<p id="p3" style="line-height:10px;">' + Prix3.toFixed(2) + '</p>');
//BUG HERRERRERERERERER
$("clickedItemId").click(function() {
var Figure = $(this).find('p').html();
totalArea.value += '+' + Figure;
var Screen = totalArea.value.replace(/'/g, ' ');
var result = eval(Screen);
totalArea.value = result;
var $newItem = "<span style='float:left'>1 " + NomPizz.toUpperCase() + "</span><span style='float:right'>" + Figure + "</span><br/>";
$('<div><div>').html($newItem).appendTo(RecapTick);
Display2.value = "TOTAL (EUR): " + totalArea.value;
$('#pricecontainer').hide();
});
};
PS I LIVE HERE THE OLD VERSION OF THE POST (Same pb with other code):
So, my prolem is the following:
[LIVE DEMO][1]
EDIT: [DOWNLOAD SOURCE][2]
It's a simple cart that retrieves the list of products from a xml file. This part works !
When they are clicked, the products added to the list below, but when you click repeatedly on the same, the total of these should be added ... This is where I get stuck !
I tried to change the line 62:
tot = parseInt(jQuery(this).find('.prow').html());
To:
tot = parseInt(jQuery(this).find('.prow').html()+1);
But not working... I think the problem is that I am using. .click(); with onclick="" method ??? Or maybe because of bad "var" use ?
Please someone enlighten me !
Here is my jsCode:
function calculate(){ var tot = 0; jQuery(".totprice").each(function(e,b){ tot += parseInt(jQuery(this).text()); }); return jQuery("#amt").html("$"+tot); } function showprod(){ jQuery(".prod").each(function(e){ jQuery(this).delay(500*e).fadeIn('fast'); }); } function clearcart(){ jQuery("#clear").live('click',function(){ jQuery(".tetew").fadeIn(4000,function(){ jQuery(this).remove(); calculate(); }); }); } function delete_ajax(){ jQuery(".del").live('click',function(e){ var a = jQuery(this); var p = a.parent().parent().parent().parent().parent(); if(p){ p.fadeOut('slow',function(){ jQuery(this).remove(); calculate(); }); } }); } function addtocart(){ jQuery(".addtocart").click(function(e){ var getprod = jQuery(this).attr("prodid"); var getval = jQuery(this).attr("prodval"); jQuery("#msg").fadeIn('slow'); jQuery.ajax({ type:'GET', url:'db.xml', dataType:'xml', success: function(xml){ jQuery(xml).find('databases').each(function(){ jQuery(this).find('prod').each(function(e){ var db_id = jQuery(this).attr('id'); jQuery("#msg").fadeOut('slow'); if(getprod == db_id){ var cookies = 1; jQuery(".tetew").each(function(){ var _this = jQuery(this); var _store = _this.find('.pstore'); var ident = _this.find('.pqty'); if(getprod == ident.text()){ var tot = parseInt(jQuery(this).find('.prow').html()); //Put a +1 here won't work... jQuery(this).find('.prow').html(tot); var restot = parseInt(jQuery(this).find('.prow').text()) * parseInt(jQuery(this).find('.price').text()); jQuery(this).find('.totprice').html(restot); cookies = 0; return false; }else{ cookies = 1; } }); if(cookies == 1){ var results = "<div class='tetew'>"; results +="<table>"; results +="<tr>"; results +="<td class='pqty' style='display:none' valign='top'>" + jQuery(this).attr("id") + "</td>"; results +="<td class='img' valign='top'><img src='" + jQuery(this).attr('img') + "' width='40' height='40' /></td>"; results +="<td class='pstore' valign='top'>" + jQuery(this).text() + "</td>"; results +="<td class='prow' valign='top'>1</td>"; results +="<td class='price' valign='top'>" + jQuery(this).attr('price') + "</td>"; results +="<td class='totprice' valign='top'>" + jQuery(this).attr('price') + "</td>"; results +="<td valign='top'><a href='javascript:void(0)' class='del'>Delete</a></td>"; results +="</tr>"; results +="</table>"; results +="</div>"; } jQuery(".tetew:eq("+e+")").hide().fadeIn('fast'); jQuery("#addto").append(results); calculate(); return false; } }); }); } }); }); } function loadXMLdb() { $.ajax({ type: "GET", url: "db.xml", dataType: "xml", success: function(xml) { $(xml).find('prod').each(function() { var _Nom = jQuery(this).text(); var Col1 = jQuery(this).attr('id'); var Col2 = jQuery(this).attr('price'); var Col3 = $(this).find('grand').text(); $('<div class="prod" style="display:block;" onclick="addtocart();"></div>').html(_Nom + '<br /><img
src="images/pizza.png">
Ajouter').appendTo(".vprod");}); } }); } jQuery(document).ready(function(){ showprod(); clearcart(); addtocart(); delete_ajax(); loadXMLdb(); });
[1]: http://bzez.0fees.net/examples/jCart/ [2]: http://bzez.0fees.net/examples/jCart/jCart.zip
it seems that your cart will only reflect what is in the xml file, so you can only have 1 of each item in it. I suggest that you look at your problem differently.
try something like this:
var cart = [];
var items = [
{id:1, price:100, name:"Catch Arena"},
{id:2, price:400, name:"Pepperonni"},
{id:3, price:1400, name:"Fruits de Mer"},
{id:4, price:1400, name:"Chickenita"},
];
then, add an item to the cart with:
<a href="#" onclick="addToCart(0);">Add Catch Arena</a>
<a href="#" onclick="addToCart(1);">Add Pepperonni</a>
<a href="#" onclick="addToCart(2);">Add Fruits de Mer</a>
<a href="#" onclick="addToCart(3);">Add Chickenita</a>
the addToCart I've got here uses the index (zero based) of the array:
window.addToCart = function(idx) {
cart.push(items[idx]);
displayCart();
};
Now you've got a cart, you need to display it:
<div id="ShoppingCart">Your cart is empty</div>
<div id="total"></div>
...
window.displayCart = function() {
var cartHtml = [];
var cartTotal = 0;
for (i=0; i<cart.length; i++) {
cartHtml.push("<div>" + cart[i].name + ", " + cart[i].price + "</div>");
cartTotal += cart[i].price;
}
$('#total').html(cartTotal);
$('#ShoppingCart').html(cartHtml.join(''));
};
I've got this running in a jsfiddle: http://jsfiddle.net/R4rzC/
I wouldn't say this is best practice either, as the cart should probably synced with a backend database etc, but I dare say there is a reason why you're implementing a cart is js, probably for technical reasons!
这篇关于jQuery循环?克隆?只是为什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!