jQuery $（this）.addClassが機能しない

Question

ユーザーが文字をドロップすることができるテキストボックスのリストがありますが、間違った文字がテキストボックス内にドロップされた場合は、addClass("danger")に入力してください。誤った文字のテキストボックス私はまた、問題を説明するスクリーンショットを添付しました。

テキストボックスには、割り当てられたboxの名前のクラスがあります。

今、私のドロップ機能を以下に示します。

function dropabc(event) { 

    if ($(objBox).attr("correct1") != event.target.id) { 

     $(".imageError").fadeIn('slow').delay(1000).hide(0); 
     console.log("error"); 
     $(this).addClass('danger'); 

    } else { 

     console.log(event.target.id); 
     console.log("ok"); 
    } 
} 

$(this).addClass("danger") 

しかし、これは動作していない、私は間違った値がドロップされているボックスにdangerクラスを追加します。

//makes all the textbox red 
$(".box").addClass("danger") 

ご協力いただければ幸いです。

これが正常に動作しているjQueryのUIのドラッグ＆ドロップ可能機能です：

 var objBox; 
    $('.drag').draggable({ 

revert: true, 
     helper: 'clone', 
     cursor: 'pointer', 

     start: function(event, ui) { 

      $(this).fadeTo('fast', 0.5); 
       objBox=$(this); 
     }, 
     stop: function(event, ui) { 
      $(this).fadeTo(0, 1); 
    } 
}); 

$("#textbox, .box").droppable({ 
    hoverClass: "hoverPath", 
    drop: function(event, ui) { 

       var $this = $(this); 
         if ($this.val() == '') { 
          $this.val(ui.draggable.text()); 
          $(this).addClass("checkDiv"); 
          $(this).each(function(i, el){ 
         $(el).addClass(myid[3]); 
             }); 

         } 

     var empty = $(this).parent().find("input").filter(function() { 
      return this.value === ""; 
     }); 
     if(empty.length) { 
     console.log(empty.length); 
     } 
     else{ 
      console.log("done"); 
     } 

        } 
}); 

これは、テキストボックスの数をエコーされたPHPコードです：

for($x = 0 ; $x < count($code_words); $x++){ 

    echo "<input id='".$code_words[$x]."' ondrop='dropabc(event)' class='box' type='textbox'/>"; 

     } 

Answer 1

あなただけ実行しています入力タグの中にondropイベントを埋め込むときの関数。

埋め込みの代わりに、jQuery on("drop")を試してみてください。

$(document).on("drop", ".box", function(event){ 
     if ($(objBox).attr("correct1") != event.target.id) { 

     $(".imageError").fadeIn('slow').delay(1000).hide(0); 
     console.log("error"); 
     $(this).addClass('danger'); 

    } else { 

     console.log(event.target.id); 
     console.log("ok"); 
    } 
}) 

上のテキストボックス、それは下のテキストボックスにそう乾杯、