购物车与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

回答

相关问题