0
我想在項目放入購物車後改變其顏色,然後不允許用戶再次刪除此項目。這裏是我的手風琴代碼: 在jquery中刪除項目和限制項目後顏色發生變化
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h3><a href="#">T-Shirts</a></h3>
<div>
<ul>
<li class='ui-state-highlight'>Lolcat Shirt</li>
<li class='ui-state-highlight'>Cheezeburger Shirt</li>
<li class='ui-state-highlight'>Buckit Shirt</li>
</ul>
</div>
<h3><a href="#">Bags</a></h3>
<div>
<ul>
<li class='ui-state-highlight'>Zebra Striped</li>
<li class='ui-state-highlight'>Black Leather</li>
<li class='ui-state-highlight'>Alligator Leather</li>
</ul>
</div>
<h3><a href="#">Gadgets</a></h3>
<div>
<ul>
<li class='ui-state-highlight'>iPhone</li>
<li class='ui-state-highlight'>iPod</li>
<li class='ui-state-highlight'>iPad</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
</div><!-- End demo -->
<script>
$(function() {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text())
.addClass("cart-item")
.appendTo(this);
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
$("#catalog ul").droppable({
drop: function(event, ui) {
$(ui.draggable).remove();
},
hoverClass: "ui-state-hover",
accept: '.cart-item'
});
});
</script>
這裏是小提琴,我能夠拖放項目,但我想添加一些功能,如改變手風琴項目的顏色被丟棄到可投放區域,和也不允許用戶放棄兩次相同的物品。任何想法如何做到?提前致謝。這裏是提琴:http://jsfiddle.net/andrewwhitaker/t97FE/?utm_source=website&utm_medium=embed&utm_campaign=t97FE
爲什麼不是一個具有顏色的類並且如果存在則檢查文本? – guradio
添加.cart項目{顏色:綠色;字體重量:大膽的}到您的CSS改變顏色時,不允許用戶放棄相同的項目兩次,檢查使用jQuery。 –
@DennySutedja我需要改變顏色的產品部分不是在購物車,意味着物品下降到購物車後,目錄中丟棄物品的顏色應該改變 –