复选框单击乌龟而不是野兔答案

【问题标题】：Checkbox OnClick a Tortoise not a Hare复选框单击乌龟而不是野兔
【发布时间】：2011-03-02 02:21:48
【问题描述】：

我在复选框上执行了一些 jQuery 的 onclick 事件。它的缓慢。在 Firefox 上需要一秒钟左右，在 safari 上需要半秒钟。

如果它不保持页面位置，我不介意。有谁知道如何阻止它在执行 JS 时阻止页面向上或向下滚动。

有什么想法吗？

太棒了

EG。

onclick="levels();"

function levels() {

  var rqleveld = $(this).attr('src'); 
  var rqleveldA = Number($(this).attr('src'))+1; 
  var rqleveldB = Number($(this).attr('src'))+2; 
  if (!this.checked) { 
    $('input:checkbox[title=RQlevel' + rqleveld + ']').removeAttr('checked');
    $('input:checkbox[title=RQlevel' + rqleveld + ']').attr('disabled','disabled');
    $('span[title=RQlevel' + rqleveld + ']').css('display','block');
    $('input:checkbox[title=RQlevel' + rqleveldA + ']').removeAttr('checked');
    $('input:checkbox[title=RQlevel' + rqleveldA + ']').attr('disabled','disabled');
    $('span[title=RQlevel' + rqleveldA + ']').css('display','block');
    $('input:checkbox[title=RQlevel' + rqleveldB + ']').removeAttr('checked');
    $('input:checkbox[title=RQlevel' + rqleveldB + ']').attr('disabled','disabled');
    $('span[title=RQlevel' + rqleveldB + ']').css('display','block');
  }
  else if (this.checked) { 
    $('input:checkbox[title=RQlevel' + rqleveld + ']').removeAttr('disabled','disabled');
    $('span[title=RQlevel' + rqleveld + ']').css('display','none');
  }
product_analysis_global();
};

$(function() {

    $('input:checkbox').bind('change', levels);
});

function product_analysis_global() {
    $(':checked').each(function(){
        $('#product_' + this.alt).css('display','block');
        $('#product_quantity_PRI_' + this.alt).val(this.value);
        var quantity = $('#product_quantity_PRI_' + this.alt).val();
        var price = $('#product_price_PRI_' + this.alt).val();
        var duration = $('#product_duration_PRI_' + this.alt).val();
        var dives = $('#product_dives_PRI_' + this.alt).val();
        var hire = $('#product_hire_PRI_' + this.alt).val();

});
    $(':not(:checked)').each(function(){
        $('#product_' + this.alt).css('display','none');
        $('#product_quantity_PRI_' + this.alt).val('0');
        var quantity = $('#product_quantity_PRI_' + this.alt).val();
        var price = $('#product_price_PRI_' + this.alt).val();
        var duration = $('#product_duration_PRI_' + this.alt).val();
        var dives = $('#product_dives_PRI_' + this.alt).val();
        var hire = $('#product_hire_PRI_' + this.alt).val();

});
}

【问题讨论】：

可以发几个代码示例吗？
需要查看 click() 事件的示例代码。

标签： jquery input checkbox

【解决方案1】：

重构此代码时需要考虑的一些事项：

product_analysis_global() 可能正在处理$.each() 循环中的一个（或两个）中的大量元素。我的猜测是，仅此一项就是造成大部分感知缓慢的原因。也许您的页面本身非常复杂和/或很大，导致需要大量时间来查找“选中”或“未选中”的单个元素。
您正在制作大量的“全局”jQuery 选择。虽然 jQuery 非常适合处理 $("<selector>") 调用，但请尝试在 levels() 函数中使用像 $(<some element>).find("<child selector>") 这样的“本地”选择器——如果这在您的应用的特定上下文中有意义的话。
通过与第 2 项相同的逻辑，如果选择器是常量，您可以尝试存储 $("") 调用的值。例如，而不是

var rqleveld = $(this).attr('src'); var rqleveldA = Number($(this).attr('src'))+1; var rqleveldB = Number($(this).attr('src'))+2;

你可以选择

var $this = $(this);
var rqleveld = $this.attr('src'); 
var rqleveldA = Number($this.attr('src'))+1; 
var rqleveldB = Number($this.attr('src'))+2;

【讨论】：