Ошибка изменения атрибута jQuery ID? - PullRequest
Новая
       2

Ошибка изменения атрибута jQuery ID?

2 голосов
/ 21 ноября 2011

Правильно, у меня есть пример веб-сайта, который я делаю, и я использую в основном jQuery.На моем нижнем колонтитуле я получаю анимацию при нажатии, и я могу изменить идентификатор нижнего колонтитула после того, как щелчок и анимация произошли.Но когда я снова щелкаю по нему (чтобы выполнить команды jQuery для нового идентификатора), это не работает.похоже, что ни один из кодов jQuery не выполняется после изменения идентификатора.Вот код, используемый:

Это код для изменения идентификатора в первом случае: 

$("#footer").click(function(){
    $("#footercontent").animate({height:"200px"});
    $("#footer").attr("id", "footerclose");

Этот код для изменения идентификатора обратно: 

$("#footerclose").click(function(){
    $("#footercontent").animate({height:"1px"});
    $("#footercontent").hide();
    $("#footerclose").attr("id", "footer");
});

Это CSS для содержимого нижнего колонтитула: 

#footercontent {
    width:990px;
    height:1px;
    text-align:center;
    background-color:#FFF;
    padding:5px;
    box-shadow:inset 0 0 25px #000;
    border:0px;
}

Это CSS для нижнего колонтитула и нижнего колонтитула: 

#footer {
    color:#999;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    z-index:99;
    width:150px;
    height:30px;
    border:0px;
    padding:5px;
}

#footerclose {
    color:#999;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    width:150px;
    height:30px;
    border:0px;
    padding:5px;

Вы можете найти этот сайт здесь: http://epicgiggle.co.uk/test/example/

Я посмотрел везде, и нет решения.

Помощь очень ценится.

Ответы [ 3 ]

4 голосов
/ 21 ноября 2011

Вы пытаетесь привязать обработчик .click() к #footerclose в $(document).ready().Но в этот момент времени нет элемента с этим идентификатором, поэтому обработчик не привязывается ни к чему.

Вы можете исправить это с помощью текущего подхода, используя .delegate(), например: 

$(body).delegate('#footerclose', 'click', function() { ... });

Как отмечает @JonathanG, в jQuery 1.7 вместо этого следует использовать .on(): 

$(body).on('click', '#footerclose', function() { ... })

Но, честно говоря, я бы так не поступил - думаю, вы бынамного проще, используя .toggle() ( документы ): 

$('#footer').toggle(
   function() {
       // animate open, add a class to change the CSS
   },
   function() {
       // close, remove the class
   }
);
0 голосов
/ 21 ноября 2011

Несколько не связано, но вы можете сделать некоторую оптимизацию кода.Например, каждый из следующих селекторов делает одно и то же (.hide();): 

$("#homecontent").hide();
$("#aboutcontent").hide();
$("#contactcontent").hide();
$("#othercontent").hide();
$("#footercontent").hide();

Это можно преобразовать в: 

$("#homecontent, #aboutcontent, #contactcontent, #othercontent, #footercontent").hide();

Также, .css() (такжекак .animate();) атрибуты могут быть объединены.Итак, это: 

$("#aboutcontent").css({height:"10px"});
$("#aboutcontent").css({width:"490px"});

можно преобразовать в: 

$("#aboutcontent").css({ height:"10px", width: "490px" });

Они не ограничиваются только этими примерами.Есть несколько мест, где ваши идентификаторы делают одно и то же (например, .hide();), где вы можете комбинировать селекторы.

Наконец, я бы предложил использовать переменные.Каждый раз, когда вы делаете что-то вроде $ ("# homecontent"), jQuery выходит и ищет на странице что-нибудь с идентификатором "homecontent".Однако с помощью переменной, такой как var homecontent = $("#homecontent"), вы кэшируете этот селектор, поэтому его не нужно искать каждый раз.Он будет работать быстрее и будет более читабельным для вас.Если вы сделаете это, ваши строки jQuery будут выглядеть примерно так: 

homecontent.css({ height:"10px", width:"240px" });
etc etc...
0 голосов
/ 21 ноября 2011

Вы должны использовать jQuery live, потому что элемент отсутствует на странице, когда вы пытаетесь присоединить click обработчик событий.

Попробуйте это 

$("#footer").live('click', function(){
    $("#footercontent").animate({height:"200px"});
    $("#footer").attr("id", "footerclose");
});

$("#footerclose").live('click', function(){
    $("#footercontent").animate({height:"1px"});
    $("#footercontent").hide();
    $("#footerclose").attr("id", "footer");
});
...