購物車與jQuery

我正在一個虛擬的網上商店，將在訂單頁面上有一個簡單的購物車。購物車與jQuery

這是我迄今所做的：

 <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

來源

2013-04-27 Chris

通過javascript創建購物車？我不確定這是個好主意...... Btw使用jQuery的OnClick是非常糟糕的做法，而是使用監聽器。與內聯CSS一樣，避免這樣做 – bicycle 2013-04-27 12:18:45

我不能完成所有的工作，但這裏是一個很好的起點。主要概念是將選定對象克隆到新容器中。這樣做我使用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/

來源

2013-04-27 11:51:58

購物車與jQuery

回答

相關問題