Jquery関数がループしないようにしようとしています

Question

Jqueryを使用してドラッグ＆ドロップアプリケーションを構築しています。すべての関数は正常に動作していますが、html.changeを使用してドロップされたアイテムのスクリプトを有効にしています。今私が問題になっているのは、アプリケーションのHTMLに何回変更を加えるかによってアプリケーションが遅くなることです。

これは私が「checkdrop」の最後に警告を置けば、それは私がきた変化の量と回数と同じ量をトリガされます

$(function() { 
    $('html').change(function() { 
    $(".checkdrop").change(function() { 
     var checkdrop = $(this).closest('.labelDrop').find('.checkdrop').val(); 
     var textul = $(this).closest('.labelDrop').find('.textUL'); 
     var input = '<input type="text" placeholder="Value" class=""><br>'; 
     if (checkdrop >= 3) { 
     $(this).closest('.labelDrop').find('.three').css("display", "block"); 
     $('th.three').css("display", "table-cell") 
     } 
     if (checkdrop >= 4) { 
     $(this).closest('.labelDrop').find('.four').css("display", "block"); 
     $('th.four').css("display", "table-cell") 
     } 
     if (checkdrop >= 5) { 
     $(this).closest('.labelDrop').find('.five').css("display", "block"); 
     $('th.five').css("display", "table-cell") 
     } 
     if (checkdrop >= 6) { 
     $(this).closest('.labelDrop').find('.six').css("display", "block"); 
     $('th.six').css("display", "table-cell") 
     } 
     if (checkdrop >= 7) { 
     $(this).closest('.labelDrop').find('.seven').css("display", "block"); 
     $('th.seven').css("display", "table-cell") 
     } 
     if (checkdrop >= 8) { 
     $(this).closest('.labelDrop').find('.eight').css("display", "block"); 
     $('th.eight').css("display", "table-cell") 
     } 

     if (checkdrop == 2) { 
     $(this).closest('.labelDrop').find('.three,.four,.five,.six,.seven,.eight').css("display", "none").val("") 
     } 
     if (checkdrop == 3) { 
     $(this).closest('.labelDrop').find('.four,.five,.six,.seven,.eight').css("display", "none").val("") 
     } 
     if (checkdrop == 4) { 
     $(this).closest('.labelDrop').find('.five,.six,.seven,.eight').css("display", "none").val("") 
     } 
     if (checkdrop == 5) { 
     $(this).closest('.labelDrop').find('.six,.seven,.eight').css("display", "none").val("") 
     } 
     if (checkdrop == 6) { 
     $(this).closest('.labelDrop').find('.seven,.eight').css("display", "none").val("") 
     } 
     if (checkdrop == 7) { 
     $(this).closest('.labelDrop').find('.eight').css("display", "none").val("") 
     } 
    }); 
    }); 
}); 

を使用しているJavaScriptコードでありますHTMLに行われました。

これを簡単にしてコードがループしないようにする方法はありますか？

ありがとうございます。

Answer 1

あなたのコードを見ると、1つの問題があります。

なぜすべてのHTMLが必要ですか？

ダウン

$('html').change(function() { 

removeメソッドの検索を（）jqueryののやった性能も、乗り心地とその良いではない、すべてのDOM要素が性能もするので

私はあなたのhtmlを知っているが、見つけること parentNodeを使用しようといけない

最も近い

Answer 2

私はあなたの解決策だと思います。あなたのHTMLコード構造はわかりません。

$(function() { 
    $('html').change(function() { 
     $(".checkdrop").change(function() { 

      var checkdrop = parseInt($(this).closest('.labelDrop').find('.checkdrop').val()); 
      var textul = $(this).closest('.labelDrop').find('.textUL'); 
      var input = '<input type="text" placeholder="Value" class=""><br>'; 

      var checkdrop_class={ 
       1: ".one", 
       2: ".two", 
       3: ".three", 
       4: ".four", 
       5: ".five", 
       6: ".six", 
       7: ".seven", 
       8: ".eight" 
      }; 

      current_class=checkdrop_class[checkdrop]; 
      $(this).closest('.labelDrop').find(current_class).css("display", "block"); 
      $('th'+current_class).css("display", "table-cell") 

      for(var i=checkdrop+1;i<=8;i++) 
      { 
       $(this).closest('.labelDrop').find(checkdrop_class[i]).css("display", "none").val("") 
      } 
     }); 
    }); 
});