我正在使用jquery拖放。当可拖动元素被拖放到正确的插槽上时，可拖动的div会添加一个类（“正确”）以更改背景颜色。
现在，我希望在父div添加类时，在draggable div中使用类'info'更改嵌套div的边框颜色。如何修改下面的代码来实现这个目标？
我尝试添加$（'。info'）。addClass（'correct'）;这里：
ui.draggable.addClass( 'correct' );
$('.info').addClass( 'correct' );
ui.draggable.draggable( 'disable' );
虽然这将类添加到.info as .info.correct OK，但它也为具有info类的所有其他元素执行此操作...我只是希望在父类获取类时更改该div在放入正确的插槽后添加...而不是具有信息类的其他div ......
HTML：
<div id="content">
<div id="elements">
<div class="element" id="element_1" data-link="element_1.html">Element 1<a href="#" class="info">i</a></div>
<div class="element" id="element_2" data-link="element_2.html">Element 2<a href="#" class="info">i</a></div>
</div>
<div id="slots">
<div id="slot_1"></div>
<div id="slot_2"></div>
</div>
</div>
使用Javascript：
$('#element_1').data( 'number', 1 ).attr( 'id', 'element'+1 ).draggable( {
containment: '#content',
stack: '#elements div',
cursor: 'hand',
revert: true
} );
$('#element_2').data( 'number', 2 ).attr( 'id', 'element'+2 ).draggable( {
containment: '#content',
stack: '#elements div',
cursor: 'hand',
revert: true
} );
$('#slot_1').data( 'number', 1 ).droppable( {
accept: '#elements div',
hoverClass: 'hovered',
drop: handleElementDrop
} );
$('#slot_2').data( 'number', 2 ).droppable( {
accept: '#elements div',
hoverClass: 'hovered',
drop: handleElementDrop
} );
}
function handleElementDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var elementNumber = ui.draggable.data( 'number' );
if ( slotNumber == elementNumber ) {
ui.draggable.css( 'cursor', 'pointer' );
ui.draggable.click(function(e) {
window.open(ui.draggable.attr('data-link'));
});
$('.info').addClass( 'correct' );
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
}
}