jQuery ID 属性更改错误？

Question

好的，所以我有一个我正在制作的示例网站，而且我主要使用 jQuery。在我的页脚上，我让它在点击时产生动画，并且在点击和动画发生后我让它改变页脚的 ID。但是当我再次单击它（执行新 ID 的 jQuery 命令）时，它不起作用。似乎在更改 ID 后没有执行任何 jQuery 代码。这是使用的代码：

这是在第一个实例中更改 ID 的代码：

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

这是改回ID的代码：

$("#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/

我到处找了，没有解决办法。

非常感谢您的帮助。

Answer 1

您正在尝试将.click() 处理程序绑定到$(document).ready() 中的#footerclose。但是在那个时间点没有具有该 id 的元素，因此处理程序不会绑定到任何东西。

您可以使用.delegate() 以当前方法解决此问题，例如：

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

正如@JonathanG 所说，在 jQuery 1.7 中，这应该使用 .on() 代替：

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

但老实说，我不会这样做 - 我认为您只需使用 .toggle() (docs) 会更轻松：

$('#footer').toggle(
   function() {
       // animate open, add a class to change the CSS
   },
   function() {
       // close, remove the class
   }
);

Answer 2

您应该使用 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");
});

Answer 3

有点不相关，但是，你可以做一些代码优化。例如，以下每个选择器都做同样的事情 (.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" });

这些不仅限于这些示例。您的 ID 在多个地方执行相同的操作（例如 .hide();），您可以在其中组合选择器。

最后，我建议使用变量。每次您执行 $("#homecontent") 之类的操作时，jQuery 都会出去并在页面上搜索 ID 为“homecontent”的任何内容。但是，使用变量，例如var homecontent = $("#homecontent")，您可以缓存该选择器，因此不必每次都搜索它。它会运行得更快，并且对您来说更具可读性。如果你这样做了，你的 jQuery 行看起来像这样：

homecontent.css({ height:"10px", width:"240px" });
etc etc...