0

私のコードは、1つを除いて、計画どおりに機能します。濃い灰色のボックスをクリックすると、オレンジ色のボックスがshow（）;とともに表示されます。

ただし、青いドラッグ可能なdivをオレンジ色のボックスにドロップすると、紫色のボックスが表示されるようにします。これはうまくいかないようです。

あなたへの私の質問は、それが数行上で機能するのに、なぜこれがドロップ関数で機能しないのか、そしてどうすればこれを機能させることができますか？

紫色のdivをオレンジ色のdivの中に配置しようとしましたが、表示されるのは1回だけです...助けていただければ幸いです。理解できない場合はお知らせください。

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.orangediv.purplediv.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 に答える