基本的 JQuery 问题答案

【问题标题】：Basic JQuery Question基本的 JQuery 问题
【发布时间】：2011-06-22 18:02:34
【问题描述】：

我有以下在页面加载时处理 GET 请求的 JQuery 代码：

$(document).ready(function() {  
  var refreshId = setInterval(function()
  {
       $('#tweets').fadeOut("slow").fadeIn("slow");
       $.get("/event", { event:$("input[name=event]").val(), }, function(data) {
         console.log(data.success);
         console.log(data.page_link);
         console.log('Succesfully Loaded Data from JSON FORMAT GET');
         $('#tweets').html(data.html);
         $('#pagelink').html(data.page_link);
       });

  }, 30000); 
});

问题是我希望仅在特定页面上处理此 GET 请求。我的应用程序在 application.js 文件中一次加载所有 JQuery 文件。我如何使用 JQuery 来指定文档准备之外的其他内容以及理想的选择器是什么？

【问题讨论】：

您可以随时使用 location.href 来检查用户是否在您要发出请求的页面上。
你想如何识别页面？

标签： javascript jquery function selector document-ready

【解决方案1】：

您可以在正文标签中添加class。

$(document).ready(function() {  
  if ($('body').hasClass('updateTweets')) {
  var refreshId = setInterval(function()
  {
       $('#tweets').fadeOut("slow").fadeIn("slow");
       $.get("/event", { event:$("input[name=event]").val(), }, function(data) {
         console.log(data.success);
         console.log(data.page_link);
         console.log('Succesfully Loaded Data from JSON FORMAT GET');
         $('#tweets').html(data.html);
         $('#pagelink').html(data.page_link);
       });

  }, 30000); 
  }
});

【讨论】：

这很好，但我使用的是 rails 框架，所有的 body 都是一样的。如果我只是在页面上添加一个带有特定类的
标签并对此进行测试，它会起作用吗？

【解决方案2】：

您可以根据仅存在于您希望代码触发的页面上的元素的存在来执行条件。

从另一个问题复制：

jQuery.fn.exists = function()
{
    return jQuery(this).length > 0;
}

if ($(selector).exists())
{
    // your code here
}

【讨论】：

【解决方案3】：

您不能只将代码包含在您希望它运行的一页上吗？

您可以在<html> 标记之间的某个位置：

<script type="text/javascript">
[...code...]
</script>

将问题中的代码放在<script> 标记之间。

【讨论】：

我可以，但我不想。这是一个大型网络应用程序，具有组织良好的文件结构。
@JZ，我认为，一个大型网络应用程序的代码应该只触发一页，但包含在所有页面上，根本没有组织好。
一个更简洁的解决方案是将这个函数移动到它自己的 javascript 文件中，并且只将它包含在那个页面上。尼尔，你在跟着我吗：S？

【解决方案4】：

使用 window.location.href 检查文件位置，然后使用 if 语句：

if(window.location.href == 'whatever.html'){
    $(document).ready(function() { 
           ...
    })
}

【讨论】：

【解决方案5】：

您可以查看location 属性以了解您所在的页面。

您还可以检查元素是否存在：

if ($("something").length)

【讨论】：

【解决方案6】：

看看这种组织你的 app.js 的方式

http://weblogs.asp.net/jaimedelpalacio/archive/2011/03/23/a-way-to-organize-your-javascript-code.aspx

【讨论】：