Question

我正在开设一个虚拟网上商店，订购页面上有一个简单的购物车。

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

        <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

Answer 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/

购物车与jQuery

1 个答案: