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()处理程序绑定到#footerclose中的$(document).ready()。但是在那个时间点没有带有该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...

jQuery ID属性更改错误？

3 个答案: