我正在使用 jquery 拖放。当可拖动元素被放到正确的插槽上时，可拖动 div 会添加一个类（“正确”）以更改背景颜色。
现在，当父 div 添加类时，我想在可拖动 div 中使用类“信息”更改嵌套 div 的边框颜色。如何修改下面的代码来实现这一点？
我尝试添加 $('.info').addClass( 'correct' ); 这里：
ui.draggable.addClass( 'correct' );
$('.info').addClass( 'correct' );
ui.draggable.draggable( 'disable' );
虽然这会将类添加到 .info 作为 .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 );
}
}