2016-08-31 61 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("") 
      } 
     }); 
    }); 
});