Question

我正在使用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 );
  } 
}

Answer 1

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

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

当父div在drop之后添加了类时，更改嵌套div的边框颜色

1 个答案: