我正在开设一个虚拟网上商店,订购页面上有一个简单的购物车。
这是我到目前为止所做的:
<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
答案 0 :(得分:0)
我无法完成所有工作,但这是一个很好的起点。主要概念是在新容器内克隆选定的对象。 为此,我使用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。
您显然需要放置一些验证控件,完成代码并改进样式!