[英]On click event add Class to each HTML Element from different levels,
[英]Add different class to each image with different id after drop event
我在一個容器中有5張圖像,我必須將其放到另一個容器中以完成圖像。 將圖像放入另一個容器后,我想根據其ID向該圖像添加一個不同的類。 這樣該圖像就可以粘貼到該容器中存在的先前圖像上。
我能夠實現拖放事件,並在拖放事件后向每個圖像添加一個類。 我需要在代碼中進行哪些更改,以便根據其ID向每個圖像添加不同的類
我的密碼
<style>
.add-style {
position:absolute;
}
.north-style {
width: 375px;top: 10px;left: 11px;
}
.south-style {
width: 375px;top: 158px;left: 11px;
}
.east-style {
width: 163px;top: 10px;left: 223px;height: 250px;
}
.west-style {
width: 163px;top: 9px;left: 11px;height: 249px;
}
.center-style {
width: 126px;top: 71px;left: 135px;
}
</style>
<script>
$(function() {
$( "#sortable1" ).sortable({
connectWith: "div"
});
$( "#sortable2" ).sortable({
connectWith: "div",
stop: function( event, ui ) {
ui.item.addClass( "add-style" )
}
});
$( "#sortable1, #sortable2" ).disableSelection();
});
</script>
代碼主體
<body>
<div class="row-fluid" >
<div class="span4">
<div class="span1"></div>
<div id="sortable1" class="well sidebar-nav sidebar-nav-fixed span11">
<legend>Collect Coupon parts</legend>
<span>1st part</span>
<img id="north-img" class="ui-state-highlight" src="images/demo/north.png" >
<span>2nd part</span>
<img id="south-img" class="ui-state-highlight" src="images/demo/south.png" >
<span>3rd part</span>
<img id="east-img" class="ui-state-highlight" src="images/demo/east.png" >
<span">4th part</span>
<img id="west-img" class="ui-state-highlight" src="images/demo/west.png" >
<span>5th part</span>
<img id="center-img" class="ui-state-highlight" src="images/demo/center.png">
</div>
</div>
<div id="sortable2" class=" well sidebar-nav sidebar-nav-fixed span8">
<legend>Canvas section</legend>
</div>
</div>
</body>
首先將您的課程更改為以下內容。
顯示了兩個示例,也更改為其他3個。
.north-img-style {
width: 375px;top: 10px;left: 11px;
}
.south-img-style {
width: 375px;top: 158px;left: 11px;
}
然后在代碼的這一部分中添加這兩行
stop: function( event, ui ) {
var theID = ui.item.attr('id');
ui.item.addClass(theID + '-style');
}
var theID
獲取元素的id
,然后我們只添加具有相同ID的Class,但向其中添加-style。 因此,這將適用於您所有五個不同的類。
編輯
是的,您一次可以添加多個課程。 像這樣用逗號分開:
var theID = ui.item.attr('id');
ui.item.addClass(theID + '-style', 'add-style');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.