jQuery循环?克隆?只是为什么?

本文介绍了jQuery循环?克隆?只是为什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

新版本(不是新问题...)

因此，我遇到了一个.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):

解决方案

看来您的购物车只会反映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):

解决方案

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循环?克隆?只是为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！