使用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'); 
});