带有 jQuery 的购物车答案

【问题标题】：Cart with jQuery带有 jQuery 的购物车
【发布时间】：2013-04-27 09:46:10
【问题描述】：

我正在开发一个虚拟在线商店，它将在订单页面上有一个简单的购物车。

这是我到目前为止所做的：

        <div class="content">
        <div class="divcenter" style="clear:both;">
            <form method="post">
                <h2>NEW ORDER</h2><br />
                <p class="boxlefttitle">Product List</p>
                <p class="boxrighttitle">Shopping Cart</p>
                <div class="boxleft">
                    <ol id="selectable">
                        <li class="ui-widget-content">Item 1</li>
                        <li class="ui-widget-content">Item 2</li>
                        <li class="ui-widget-content">Item 3</li>
                        <li class="ui-widget-content">Item 4</li>
                        <li class="ui-widget-content">Item 5</li>
                        <li class="ui-widget-content">Item 6</li>
                        <li class="ui-widget-content">Item 4</li>
                        <li class="ui-widget-content">Item 5</li>
                        <li class="ui-widget-content">Item 6</li>
                    </ol>
                </div>
                <div class="boxright">
                    <ol>
                        <!--shopping cart-->
                    </ol>
                </div>
                <span>You've selected:</span> <span id="select-result">none</span>.
                <div style="margin-top: 50px;"><input type="button" value="Add to Basket" onClick="addToBasket();" /></div>
                <div style="margin-top: 50px;"><p class="small">Quantity:<br /><input type="text" style="width:50px;" /></p></div>
                <div style="margin-top: 50px;"><input type="button" value="Remove Item" /></div>
            </form>

我已经包含了一些 jQuery 来选择每个列表项：

        <script>
    $(function()
    {
        $( "#selectable" ).selectable(
        {
            stop: function() 
            {
                var result = $( "#select-result" ).empty();
                $( ".ui-selected", this ).each(function() 
                {
                    var index = $( "#selectable li" ).index( this );
                    result.append( " #" + ( index + 1 ) );
                });
            }
        });
        $( "#selectable" ).selectable(
        {

            selected: function(event, ui) 
            {
                alert( $(ui.selected).attr('id') );
            }
        });
    });
    </script>

我确实有一些问题：

如何将每个选中的项作为变量获取？
如何以正确的数量显示购物车中的每件商品？关于如何解决这个问题的任何想法？

谢谢！

PS：网站当前外观：http://i.imgur.com/KM4LHMB.png

我希望它看起来如何（用 Photoshop 制作）：http://i.imgur.com/zNrXJ3z.png

【问题讨论】：

通过javascript创建购物车？我不确定这是一个好主意……顺便说一句，使用 jQuery 的 OnClick 是非常糟糕的做法，请改用侦听器。与内联 css 相同，避免这样做

标签： jquery jquery-ui cart shopping

【解决方案1】：

我无法完成所有工作，但这是一个很好的起点。主要概念是将所选对象克隆到新容器中。为此，我使用 jQuery clone

创建匹配元素集的深层副本。

新代码：

$(function () {
    $("#selectable").selectable({
        stop: function () {
            var result = $("#select-result").empty();
            $(".ui-selected", this).each(function () {
                var index = $("#selectable li").index(this);
                result.append(" #" + (index + 1));
            });
        }
    });

    $("#ulCart").selectable();

});

function addToBasket() {
    $(".ui-selected", $("#selectable")).each(function () {
        $(this).clone().appendTo("#ulCart").removeClass("ui-selected").append("<div class='cartN'>" + $("#qtyCart").val() + "</div>");
    });
}

在您的空 addToBasket 函数中，我获取所有选定的项目，克隆它们，并附加到 ulCart 容器（篮子容器）；在里面我放了一个带有所选数量的div。

您显然必须放置一些验证控件，完成代码并改进样式！

工作小提琴：http://jsfiddle.net/IrvinDominin/BG8EX/1/

【讨论】：