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

Question

想要在使用jQuery的click事件时将2个函数分配给按钮，它将如下工作：当单击按钮时，我有一个隐藏在另一个div后面的div使用jQuery滑动div来设置动画效果...此#show ID显示div，ID #hide隐藏div，如何为同一个按钮分配2个不同的ID？我已经做到了这一点使用ID属性和attR ...改为#hide，但联系到该ID的功能不performedry

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() { 
    ... 
}); 

通过附加的单击事件处理程序，而不是父DIV，每当父母看到发生的事件在孩子的div用的ID hide，它将运行该子div上的功能。

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

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

（3）最后，它的工作原理！但是，如果我们在页面中添加另一个hiddendiv，我们会发现当我们单击一个时，它会更新所有这些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'); 
});