2016-08-31 62 views
0

我正在使用jquery構建一個拖放應用程序。所有的功能都正常工作,但我使用html.change來啓用腳本以刪除項目。我現在遇到的問題取決於我在應用程序中對HTML做了多少更改,導致應用程序速度變慢。試圖阻止jquery函數循環

這是Javascript代碼我使用

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

如果我把在「checkdrop」結束警報就會被觸發的次數相同數量的變化,我已經量完成HTML。

有沒有辦法讓這更容易,並防止代碼循環?

在此先感謝。

+1

因爲您保持綁定事件....爲什麼你有html更改()? – epascarello

+1

許多改進。最重要的是:不要重新加入處理程序。而不是所有的if語句,使用開關或其他if。 –

回答

0

當你看看你的代碼,我看到一個問題。

爲什麼你需要看到所有的html?

的服務表現布萊恩跌

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

remove方法查找(jQuery的的),因爲車程,所有的DOM元素的並不好服務表現

我不知道你的HTML,但嘗試使用parentNode找到最接近

0

我認爲這是你的解決方案,我不知道你的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("") 
      } 
     }); 
    }); 
});