Question

我在美标中创建了一个拖放式购物车。但我在这个javascript jquery脚本中有一个问题，我花了一天时间在这些代码中找到错误：

function addToCart( jQueryitem ) {
        var jQuerylist = jQuery( "ul", jQueryhv_cart_items ).length ?
        jQuery( "ul", jQueryhv_cart_items ) :
            jQuery( "<ul class='gallery ui-helper-reset'/>" ).appendTo( jQueryhv_cart_items );

        //ajax add to cart
        var hvvid = jQueryitem.attr("id");
        var hvvcatid = jQueryitem.attr("catid");

        jQuery.get("index.php?quantity[]=1&addtocart=Thêm vào giỏ hàng&option=com_virtuemart&view=cart&task=add&virtuemart_product_id[]="+hvvid+"&virtuemart_category_id[]="+hvvcatid,function(data,status){
            //alert("Data: " + data + "\nStatus: " + status);
        });

        //@hoangvi: find product has the same id with hvvid
        //if founded update product quantity
        //otherwise add product to cart
        var total_li = jQuerylist.find("li").length;
        for (var i=0; i<total_li; ++i) {
            var current_li = jQuerylist.find("li")[i];
            //alert(jQuery('<div/>').append(current_li.clone()).html());
            var li_hidden = current_li.find("span.hv_hidden");
            //alert(jQuery('<div/>').append(li_hidden.clone()).html());
            var id = li_hidden.attr("id");
            //alert(id);
            if (id == hvvid) { //founded
                var quantity = li_hidden.attr('quantity');
                //alert(quantity);
                quantity = quantity+1;
                li_hidden.attr('quantity',quantity);
                return;
            }
        }

        //add product to cart
        var jQueryitem2 = jQuery('<li class="ui-widget-content ui-corner-tr"></li>');
        var jQueryitem_img = jQuery("<div />").append(jQueryitem.find( 'img' ).clone()).html();

        jQueryitem2.append( jQueryitem_img ).append('<span>SL: 1</span> ' )
        .append('<span class="hv_hidden" id="' + hvvid + '" quantity="1"> </span> ');
        jQueryitem2.appendTo( jQuerylist ).fadeIn(function() {
            jQueryitem2
                .animate({ width: "48px" })
                .find( "img" )
                    .animate({ height: "36px" });
        });
        jQueryitem2.append()
    //});
}

我认为这些代码存在这个问题：

        //@hoangvi: find product has the same id with hvvid
        //if founded update product quantity
        //otherwise add product to cart
        var total_li = jQuerylist.find("li").length;
        for (var i=0; i<total_li; ++i) {
            var current_li = jQuerylist.find("li")[i];
            //alert(jQuery('<div/>').append(current_li.clone()).html());
            var li_hidden = current_li.find("span.hv_hidden");
            //alert(jQuery('<div/>').append(li_hidden.clone()).html());
            var id = li_hidden.attr("id");
            //alert(id);
            if (id == hvvid) { //founded
                var quantity = li_hidden.attr('quantity');
                //alert(quantity);
                quantity = quantity+1;
                li_hidden.attr('quantity',quantity);
                return;
            }
        }

因为当我删除上面的代码时它正常工作（但是当我添加两个产品具有相同的id时无法更新产品数量）。我认为这是一个语法错误，因为它使jquery无法正常工作。像这样的HTML代码：

<ul class="gallery ui-helper-reset">
                                <li class="ui-widget-content ui-corner-tr" style="width: 48px;"><img src="/chovietnam.com/images/stories/virtuemart/product/resized/vantech-vt-3500i_90x90.jpg" alt="vantech-vt-3500i" class="featuredProductImage" border="0" style="height: 36px;"><span>SL: 1</span> <span class="hv_hidden" id="24" quantity="1"> </span> </li><li class="ui-widget-content ui-corner-tr" style="width: 48px;"><img src="/chovietnam.com/images/stories/virtuemart/product/resized/lenovo-g460small_90x90.jpg" alt="lenovo-g460small" class="featuredProductImage" border="0" style="height: 36px;"><span>SL: 1</span> <span class="hv_hidden" id="21" quantity="1"> </span> </li><li class="ui-widget-content ui-corner-tr" style="width: 48px;"><img src="/chovietnam.com/images/stories/virtuemart/product/resized/designer-handbag-223093101833428290_90x90.jpg" alt="designer-handbag-223093101833428290" class="featuredProductImage" border="0" style="height: 36px;"><span>SL: 1</span> <span class="hv_hidden" id="19" quantity="1"> </span> </li></ul>

任何人都可以帮我解决这个问题，谢谢

Answer 1

错误在下面的行中。

var current_li = jQuerylist.find("li")[i]' // This gets the DOM Object

var li_hidden = current_li.find("span.hv_hidden");

current_li是 DOM对象，而不是 jQuery对象

因此current_li应为$(current_li)

在使用.find()

之前将其转换为jQuery对象

Answer 2

...代码（但是当我添加两个产品时，无法更新产品数量相同的身份）

页面上的元素不能具有相同的ID。除非您正确过滤它。这是一个例子：

<div class="products">
    <span id="item1">My Item</span>
</div>
<div class="categories">
    <span id="item1">My Item 2</span>    
</div>


$(function() {
    //This will only find the first item with a duplicate ID
    var $items = $("#item1");
    alert("Only the first item: " + $items.text());

    //This will find each duplicate id since it's setting the context either to ".products" or ".categories"
    var $items = $("#item1", ".products");
    alert("Products Item: " + $items.text());

    var $items = $("#item1", ".categories");
    alert("Category Item: " + $items.text());
});

请参阅：http://jsfiddle.net/anAgent/eGSpw/

请帮我在我的jquery代码中找到错误？

2 个答案: