0

注文ページにシンプルなショッピング カートがある仮想オンライン ショップに取り組んでいます。

これが私がこれまでに行ったことです：

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

ただし、いくつかの問題があります。

  1. 選択した各項目を変数として取得する方法は?
  2. ショッピングカート内の各商品を正しい数量で表示するにはどうすればよいですか? これを解決する方法のアイデアはありますか?

ありがとう！

PS: ウェブサイトの現在の外観: http://i.imgur.com/KM4LHMB.png

どのように見せたいか (フォトショップで作成): http://i.imgur.com/zNrXJ3z.png

4

1 に答える 1

0

すべての作業を行うことはできませんが、ここからが良い出発点です。主な概念は、選択したオブジェクトを新しいコンテナ内に複製することです。そのために、jQueryクローンを使用します

一致した要素のセットのディープ コピーを作成します。

新しいコード:

$(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/

于 2013-04-27T11:51:58.927 に答える