0

我的代码按计划工作，除了一件事。当您单击深灰色框时，橙色框与 show(); 一起出现。

但是，当您将蓝色可拖动 div 放在橙色框上时，我希望出现紫色框。这似乎不起作用。

我对你的问题是，为什么在 drop 函数中它在上面几行工作时不能工作，我怎样才能使它工作？

我尝试将紫色 div 放在橙色 div 内，但它只显示一次......非常感谢任何帮助，当你不理解我时让我知道。

JsFiddle（问题出在可放置函数中）

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>
4

2 回答 2

1

尝试这个

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

这是小提琴..

http://jsfiddle.net/uTLUM/2/

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

我添加了它，parent()以便它在当前内部搜索div.lightgray，从而找到紫色 div ...

于 2012-11-26T12:44:43.667 回答
1

在您的 jsfiddle 上检查此更新

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

http://jsfiddle.net/uTLUM/4/

于 2012-11-26T12:46:52.340 回答