一個按鈕工作，其他不工作，相同的腳本

Question

好的我得到了這種情況

        <div id="container">
        <img src="images/4.png" />
        <ul class="menu">
            <li id="menu-0"> <p class="menuP" id="button0">                                                 </p></li>
            <li id="menu-1"> <p class="menuP" id="button1"> <a id="abutton1" onclick="animatedown1()">  </a></p></li>
            <li id="menu-2"> <p class="menuP" id="button2"> <a id="abutton2" onclick="animatedown2()">  </a></p></li>
            <li id="menu-3"> <p class="menuP" id="button3"> <a id="abutton3" onclick="animatedown3()">  </a></p></li>
            <li id="menu-4"> <p class="menuP" id="button4"> <a id="abutton4" onclick="animatedown4()">  </a></p></li>
            <li id="menu-5"> <p class="menuP" id="button5">                                                 </p></li>
        </ul>
    </div> 
    <div id="bgRepeat1"> 
        <div class="textContainer" id="textContainer1">  <!-- only one of these is visible at any given time -->                      
            <p> container 1 </p>
        </div>
        <div class="textContainer" id="textContainer2">
            <p> container 2 </p>
        </div>
        <div class="textContainer" id="textContainer3">
            <p> container 3 </p>
        </div>
        <div class="textContainer" id="textContainer4">
            <p> container 4 </p>
        </div>
    </div>

這是我得到的javascript

function animatedown1()
{
    alert('start1');
    $("#textContainer1").animate({  
        opacity:'0'
        },800, function(){
        alert('end1');});
}

它適用於第一個例子，但它不適用於任何其他例子

function animatedown2()
{
    alert('start2');
    $("#textContainer2").animate({  
        opacity:'0'
        },800, function(){
        alert('end2');});
}

我認為沒有必要發布其他2（animatedown3和4）

好吧......基本的想法是：我有4個按鈕，它們被列出（按鈕0和按鈕5不做它們剛剛列出的任何內容）點擊例如button1，應顯示textcontainer1並隱藏之前顯示的任何內容

基本上是一個動畫菜單，沒有鏈接到其他頁面，都在一個頁面中。

現在只有當我點擊button1時，它才能工作，它隱藏了textcontainer1（我知道它應該顯示它，這里只是看按鈕是否工作），這很好。 問題出在這里：當我點擊按鈕2,3或4沒有任何反應時，我已經在這些按鈕中實現了alert（），這樣我就可以看到腳本是否啟動但它只是沒有啟動，它只適用於button1

所有4個函數幾乎完全相同，但如果我發現如果我在animatedown1（）中切換$（“＃textContainer1”）與$（“＃textContainer2”）的部分，它適用於textContainer2 ..所以這讓我認為某些原因只有第一個功能有效。

任何幫助將不勝感激。

PS：我試過這個

$("#menu-1").click(function() {
    $("#textContainer1").animate({
        opacity:'0'
        },800, function(){
        alert('wtf');});
    });

但是在這里我不能讓它在menu-1上注冊我的點擊（也嘗試使用ID的button2和abutton2）任何使用.click或onclick函數的解決方案都會受到贊賞。

http://www.byforthewind.hit.bg/

編輯：我發現了什么是錯的...當我檢查我的javascript時，我看到在所有4個函數下面，還有另外3個（除了第1個）同名但空。 這就是為什么只有第一個功能工作，其他3個被頁面底部的空白覆蓋。

Answer 1

我認為解決這個問題的最佳方法是重用相同的功能。 檢查這里的代碼並告訴我它是否解決了您的問題。

<div id="container">

    <ul class="menu">
        <li id="menu-0"><p class="menuP" id="button0"></p></li>
        <li id="menu-1"><p class="menuP" id="button1"><a id="abutton1" onclick="animateContainer($('#textContainer1 p'))">container 1 </a></p></li>
        <li id="menu-2"><p class="menuP" id="button2"><a id="abutton2" onclick="animateContainer($('#textContainer2 p'))">container 2 </a></p></li>
        <li id="menu-3"><p class="menuP" id="button3"><a id="abutton3" onclick="animateContainer($('#textContainer3 p'))">container 3 </a></p></li>
        <li id="menu-4"><p class="menuP" id="button4"><a id="abutton4" onclick="animateContainer($('#textContainer4 p'))">container 4 </a></p></li>
        <li id="menu-5"><p class="menuP" id="button5"></p></li>
    </ul>
</div>
<div id="bgRepeat1">
    <div class="textContainer" id="textContainer1">  <!-- only one of these is visible at any given time -->
        <p> container 1 </p>
    </div>
    <div class="textContainer" id="textContainer2">
        <p> container 2 </p>
    </div>
    <div class="textContainer" id="textContainer3">
        <p> container 3 </p>
    </div>
    <div class="textContainer" id="textContainer4">
        <p> container 4 </p>
    </div>
</div>

<script type="text/javascript">
    function animateContainer(container)
    {
        container.animate( { opacity :0 }, 800, function() { console.log("ended") } );
    }
</script>

這是如何運作的？

好吧 - 我不是一次又一次地復制粘貼相同的函數，而是編寫了一次函數，我正在傳遞我想要動畫的容器。

我沒有編寫function animatedown1()和function animatedown2()等等，而是使用以下簽名function animateContainer(container)編寫了一個函數 - 正如您所看到的，我將函數傳遞給我想要動畫的元素。 這樣我就可以一次又一次地為我想要的任意數量的容器重復使用相同的功能。