用jQuery更改元素ID不适用于我的功能

Question

想要在使用jQuery的click事件时为按钮分配2个功能，它将按以下方式工作：当单击使用jQuery向上滑动div进行动画的按钮时，我有一个div隐藏在另一个div后面。 ID显示div，而ID #hide隐藏div，如何为同一按钮分配2个不同的ID？ 我已经使用ID属性完成了此操作，并且attr ...更改为#hide，但是链接到该ID的函数未执行

http://jsfiddle.net/dca2b/1/

HTML：

<div class="content"></div>
<div class="footer"></div>
<div class="hiddendiv"> 
    <a href="#" id="show">show</a>
</div>

CSS：

.content {
    height: 400px;
}
.footer {
    display: inline-table;
    background: #ff8;
    width: 100%;
    height: 80px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.hiddendiv {
    width: 500px;
    height: 300px;
    background: #252525;
    position: relative;
    z-index: 1;
    top: -120px;
    margin: 0 auto;
}
.hiddendiv a {
    color: #000;
    font-size: 15px;
    font-family: sans-serif;
    text-decoration: none;
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 20px;
    padding-right: 20px;
    background: #eee;
    border-radius: 10px;
    box-shadow: inset 0px 1px 20px 0px #333;
}
.hiddendiv a:hover {
    color: #f0f;
}

JQUERY：

$("#show").click(function () {
    $(".hiddendiv").animate({
        top: "-=250"
    }, "slow");
    $("#show").attr("id", "hide");
});

$("#hide").click(function () {
    $(".hiddendiv").animate({
        top: "+=250"
    }, "slow");
    $("#hide").attr("id", "show");
});

Answer 1

因此，我的回答有两部分，请多多包涵：

（1）它现在无法正常工作的原因是，当您运行$("#hide").click(function() { ... ，页面上尚没有具有hide id的元素，因此该函数不会设置为在任何地方运行，可以用来解决此问题的一种方法是执行以下操作：

$(".hiddendiv").on('click', '#hide', function() {
   ...
});

通过将click事件处理程序附加到父div上，每当父母看到事件发生在ID为hide的子div中时，它将在该子div上运行该函数。

（2）您不应在此处使用ID。 如果某个时候页面上有多个需要此功能的按钮，那么您将遇到麻烦，因为每个页面只能使用一个ID。 在这种情况下，上一堂课会更好。 然后，您可以执行以下操作：

$(".hiddendiv").on('click','.show', function () {
    $(".hiddendiv").animate({
        top: "-=250"
    }, "slow");
    $(".show").addClass('hide').removeClass('show');
});

（3）最后，它起作用了！ 但是，如果我们在页面上添加另一个hiddendiv，则会发现单击它会更新所有它们。 我们可以使用this来解决。 触发函数后， this关键字将引用您单击的元素（使用show或hide类。我们可以利用这一点并执行以下操作：

$(".hiddendiv").on('click','.show', function () {
    $(this).parent().animate({
        top: "-=250"
    }, "slow");
    $(this).addClass('hide').removeClass('show');
});

$(".hiddendiv").on('click','.hide', function () {
    $(this).parent().animate({
        top: "+=250"
    }, "slow");
    $(this).addClass('show').removeClass('hide');
});