Question

我的代码按计划工作，除了一件事。当你点击darkgray框时，橙色框会出现show（）;.

但是，当你将橙色框上的蓝色可拖动div放下时，我想要出现紫色框。这似乎不起作用。

我的问题是，为什么当它在上面的几行中工作时，它不能在drop函数中工作，我该如何使它工作？

我尝试将紫色div放在橙色的内部，但之后它只显示一次...... 任何帮助非常感谢，当你不理解我时，请告诉我。

JsFiddle （问题出在droppable函数中）

的jQuery

$('.lightgray').hover(

function() {
    $(this).find('.darkgray').fadeTo('fast', 0.5);
}, function() {
    $(this).find('.darkgray').fadeOut('fast');
});

$('.lightgray').bind("click", function(event) {

    $(this).find('.orange').show();
    $(this).unbind('hover');
});


$("#draggable_blue").draggable({

    revert: true
});


$('.orange').hover(

function() {
    $(this).find('.darkgray').fadeTo('fast', 0.5);
}, function() {
    $(this).find('.darkgray').fadeOut('fast');
});


$(".orange").droppable({
    drop: function() {
         $(this).find('.purple').show();
    }
});

HTML

<div id="wrapper">
<div id="container">

<div class="lightgray">

     <div class="darkgray">
     </div>

     <div class="orange">
     </div>
     <div class="purple">
     </div>

</div>

<div class="lightgray">

   <div class="darkgray">

    </div>
      <div class="orange">

    </div>
</div>
<div class="lightgray">

   <div class="darkgray">
    </div>
       <div class="orange">

    </div>
</div>
<div class="lightgray">
   <div class="darkgray">

    </div>
       <div class="orange">

    </div>
</div>
   <div class="orange">

    </div>
<div class="lightgray">

    <div class="darkgray">

    </div>
    <div class="orange">

    </div>
</div>
 <div class="lightgray">

   <div class="darkgray">
      </div>
        <div class="orange">

    </div>

</div>

<div class="lightgray">

    <div class="darkgray">

    </div>
<div class="orange">

    </div>
    </div>


<div class="lightgray">
    <div class="darkgray">

    </div>

 <div class="orange">

    </div>
</div>


       <div id="menu">
          <div id="draggable_blue">
          </div>
       </div>
</div>
</div>

Answer 1

试试这个

$(this).parent().find('.purple').show();

这是小提琴..

http://jsfiddle.net/uTLUm/2/

.find()获取当前匹配元素集中每个元素的后代。因此，对于$(this).find()，您在div.orange内搜索，因为您的div.purple在外面。它将无法找到div.purple。

我添加了parent()，以便在当前div.lightgray内搜索，因此找到了紫色的div ...

Answer 2

在jsfiddle上查看此更新

........
$(".orange").droppable({
    drop: function() {
         $(this).hide();
        $(this).find('.purple').show();
    }
});

http://jsfiddle.net/uTLUm/4/

使用droppable函数显示div

2 个答案: