更改边框颜色嵌套的div时，父div有类后添加类

我正在使用jQuery的拖放。当可拖动元素被拖放到正确的插槽上时，可拖动的div会获得添加的类（'正确'）以更改背景颜色。更改边框颜色嵌套的div时，父div有类后添加类

现在，我想在父div获取添加的类时，使用可拖动div中类“info”更改嵌套div的边框颜色。我如何修改下面的代码来实现这个目标？我试过添加$（'。info'）。addClass（'correct'）;在这里：

ui.draggable.addClass('correct'); 
$('.info').addClass('correct'); 
ui.draggable.draggable('disable');

虽然这增加了.INFO为.info.correct OK的类，它也做这行所有具有信息类中的其他元素...我只是希望它更改该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); 
    } 
}

来源

2013-05-06 IlludiumPu36

小提琴http://jsfiddle.net/PP6HS/ – IlludiumPu36 2013-05-06 08:50:24

小提琴只显示一个实例，因此很难多个中说。我认为这可能只是一个简单的遍历问题，可能需要'ui.draggable.parent（）。find（'。info'）。addClass（'correct'）'某处只在'.info'内定位可拖动的父项。 – Ohgodwhy 2013-05-06 08:52:31

我已经更新了小提琴，以显示两个实例... – IlludiumPu36 2013-05-06 08:56:24

只需使用parent()选择器遍历原始元素。

ui.draggable.parent().find('.info').addClass('correct')

来源

2013-05-06 08:59:13 Ohgodwhy

更改边框颜色嵌套的div时，父div有类后添加类

回答

相关问题