更改邊框顏色嵌套的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有類後添加類

回答

相關問題