只对某些页面执行jQuery效果/操作

直到现在我已经把所有的jQuery代码放在document.ready函数中。我在想，在某些情况下这不是最好的选择。只对某些页面执行jQuery效果/操作

例如：如果我想在某个页面加载时执行动画，那么最好的方法是去做什么。

$(document).ready(function() { 
    $("#element_1").fadeIn(); 
    $("#element_2").delay('100').fadeIn(); 
    $("#element_3").delay('200').fadeIn(); 
});

如果这是正确的内部则每次任何页面加载它要检查每一行，并寻找该元素的document.ready的。告诉jquery只在特定页面上执行一段代码以避免此问题的最佳方式是什么？

来源

2010-04-30 Galen

通过检查elememt存在于页面上之前执行的动画

if ($("#element-1").length) { 
    $("#element-1").fadeIn(); 
}

与其他元素

等#element_2和#element_3

到@numediaweb：

当前的jQuery is()实施就像下面那样

is: function(selector) { 
    return !!selector && jQuery.filter(selector, this).length > 0; 
},

因此，它可以更明智使用is()，但它是更快地使用刚刚length甚至更快起诉document.getElementById().length

来源

2010-04-30 16:04:06

因此，为了避免重复，我可以只对每个页面的主体元素一个唯一的ID和检查是否存在！ – Galen 2010-04-30 16:20:27

是的，你是对的！ – 2010-04-30 16:21:15

更好的方法是[将类属性设置为您的身体标记]（http://stackoverflow.com/questions/9578348/best-way-to-execute-js-only-on-specific-page/9578898#9578898 ） – numediaweb 2014-04-13 13:09:31

只包括你希望在DOM准备好为要执行的代码特定页面。 $(document).ready(...并不意味着您应该在每个页面上运行相同的代码块。这将需要执行各种检查以了解需要执行的内容。

我确定您将拥有一些您希望在每个页面上执行的常用功能，以及一些页面特定的功能。如果是这种情况，那么您可以将通用功能放入单一功能中，并从$(document).ready(...中调用该功能，以使剩下的唯一代码专用于该特定页面。例如：

function common() { 
    alert('hello'); 
} 

$(document).ready(function() { 
    common(); 
    // do some page-specific stuff 
});

我不同意在每一页上执行各种检查，以便代码知道我们在哪里。这似乎很麻烦的，完全可以避免的，比如：

function doAnimation() { 
    $("#element_1").fadeIn(); 
    $("#element_2").delay('100').fadeIn(); 
    $("#element_3").delay('200').fadeIn(); 
} 

$(document).ready(function() { 
    if(window.location.href == 'http://example.com/foo') { 
     doAnimation(); 
    } 
    if(this page has blah) { 
     doBlah(); 
    } 
});

理想的情况下，它应该是是：

$(document).ready(function() { 
    // do stuff for foo.php 
});

来源

2010-04-30 16:27:18 karim79

你是否建议为每个页面使用不同的js文件？ – Galen 2010-04-30 17:33:10

@Galen - 是的，有点。我试图鼓励你只在需要的地方使用代码，而不是把条件放在需要执行的地方。 – karim79 2010-04-30 18:56:30

只对某些页面执行jQuery效果/操作

回答

相关问题