一个按钮有效，其他按钮无效，相同的脚本

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

我认为没有必要发布另外两个( animatedown3和4)

好的所以..。基本思想是:我有4个按钮，它们被列出( button0和button5不做任何事情，他们只是列出)，例如button1，textcontainer1应该被显示，并隐藏之前显示的任何按钮

基本上是一个动画菜单，没有到其他页面的链接，所有这些都在一个页面中。

现在只有当我点击button1时它才能工作，它隐藏了textcontainer1(我知道它应该显示它，这里只是看看按钮是否工作)，这很好。这里的问题是:当我单击button1 2、3或4没有任何反应时，我已经在这些按钮中实现了alert()，所以我可以查看脚本是否启动，但它就是不启动，它只对button1起作用

所有4个函数几乎完全相同，但如果我发现如果我在animatedown1()中将部分$("#textContainer1")切换为$("# textContainer2 ")，它将适用于textContainer2。这让我认为，由于某种原因，只有第一个函数有效。

任何帮助都将不胜感激。

PS:我试着用这个做这个

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

但在这里，我不能让它注册我在菜单上的点击(也尝试了ID的button2和abutton2 )，任何使用.click或onclick功能的解决方案都将不胜感激。

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

编辑:我找到了问题所在……当我检查我的javascript时，我看到在所有4个函数的正下方，还有另外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)的函数-正如你所看到的，我传递了我想要动画元素的函数。通过这种方式，我可以一次又一次地为任意数量的容器重用相同的函数。