根据body的ID调用onload函数

Question

我想在页面加载时初始化一些元素。在不同的页面上，需要初始化不同的元素，但是，我想将所有元素保留在一个文件中。所以我想根据页面的 ID 将不同的函数附加到 body.onload 上。

谁能告诉我这是否可能？如果是，请解释如何做到这一点。

Answer 1

$(document).ready(function() {

    var bodyId = $('body').attr('id');

    if (bodyId == 'id1')
        myFunction1();
    elseif (bodyId == 'id2')
        myFunction2();

});

对于此类事情，您应该使用 CSS 类而不是 ID。

Answer 2

一种可能的模式是这样的：

var Controller = {
    homePage: function() { alert('home'); },
    contactPage = function() { alert('contact'); }
};

然后，在您的各个页面上：

$(function() {
    var id = $(body).attr('id');
    Controller[id]();
});

Answer 3

如果您使用 PHP，请首先使 pageid 可用于 JavaScript

<?php echo "<script>var pageid={$mypageid};</script>"; ?>

对于其他服务器端语言，请使用类似的内容。这应该在头部部分得到呼应。这样 body onload 就会让这个变量处于活动状态。

然后，您可以使用它来选择需要基于 pageid 执行的语句集，可以使用 onload 事件处理程序内的 switch_case 或使用 js 对象（如其他中提到的）答案。

Answer 4

您应该创建一个文件，在其中可以放置对象文字，其中的键引用 body 标记中的每个标识符。并根据当前的 body id 调用它们。

例如

    var callbacks= { 
              "id_of_body1": function(){ 
                  // will trigger when body tag will id_of_body1
              },
              "id_of_body2": function(){ 
                  // will trigger when body tag will id_of_body2
              } 
    }
  // or $(document).ready - if you would call function after document is loaded
 // or $(fn) what is shortcut   for $(document).ready(fn)
  $('body').bind('load', function(){  
       callbacks[$(this).attr('id')].apply(this,arguments)
  } )

Answer 5

尝试使用：

$('body#your-id').each(function() {
  listOfFunctions();
});