Versuchen, Jquery-Funktion zu Schleife

Question

zu verhindern Ich erstelle eine Drag & Drop-Anwendung mit Jquery. Alle Funktionen funktionieren ordnungsgemäß, aber ich verwende html.change für die Aktivierung des Skripts für gelöschte Elemente. Das Problem, das ich gerade habe, hängt davon ab, wie viele Änderungen ich an dem HTML in der Anwendung mache, es verlangsamt die Anwendung.

Dies ist der Code, Javascript I

bin mit

$(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("") 
     } 
    }); 
    }); 
}); 

Wenn ich eine Warnung am Ende des „checkdrop“ gesetzt wird es die gleiche Menge an Zeit als die Menge an Änderungen, die ich habe ausgelöst mit dem HTML gemacht.

Gibt es eine Möglichkeit, dies zu erleichtern und zu verhindern, dass der Code in Schleife geht?

Vielen Dank im Voraus.

Answer 1

Wenn Sie Ihren Code sehen, sehe ich ein Problem.

warum brauchen Sie alle HTML?

die Performace goin down

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

remove-Methode find() von jquery, weil Fahrt und alle dom Elemente, die seine nicht gut zu

performace

i Ihre HTML weiß nicht, aber versuchen parentNode verwenden zu finden am nächsten

Answer 2

Ich denke, das ist Ihre Lösung, ich weiß nicht, Ihre HTML-Code-Struktur, sonst kann es führt optimierte Lösung dann dies.

$(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("") 
      } 
     }); 
    }); 
});