вызывающая функция onload на основе идентификатора тела

Question

Я хотел бы инициализировать несколько элементов при загрузке страницы. На разных страницах нужно инициализировать разные элементы, однако я бы хотел сохранить все, если оно в одном файле. Поэтому я хотел бы присоединить к body.onload другую функцию, основанную на идентификаторе страницы.

Может кто-нибудь сказать мне, если это возможно? Если да, объясните, как это можно сделать.

Answer 1

$(document).ready(function() {

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

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

});

Для этого типа вещей лучше использовать классы CSS, чем идентификаторы.

Answer 2

Если вы используете PHP, сначала сделайте Pageid доступным для JavaScript

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

Для других серверных языков используйте нечто подобное. Это должно быть отражено в головной части. Таким образом, эта нагрузка на тело будет иметь эту переменную живой.

Затем вы можете использовать это для выбора набора операторов, которые должны быть выполнены на основе pageid, либо с помощью switch_case внутри обработчика события onload, либо с помощью js object, как упомянуто в других ответах.

Answer 3

Вы должны создать файл, в который вы можете поместить объектный литерал с ключами, ссылающимися на каждый идентификатор, который у вас есть в теге body.И вызывает их в зависимости от текущего идентификатора тела.

Например

    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 4

Один из возможных шаблонов будет выглядеть примерно так:

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

Затем на ваших отдельных страницах:

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

Answer 5

Попробуйте с:

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