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

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 个按钮，它们被列出(button0 和 button5 不做任何事情，它们只是被列出)单击例如 button1 时，应显示 textcontainer1 并隐藏之前显示的任何内容

基本上是一个动画菜单，没有指向其他页面的链接，全部在一个页面中。

现在它只有在我单击 button1 时才起作用，它隐藏了 textcontainer1(我知道它应该显示它，这只是为了查看按钮是否起作用)，这很好。问题在这里:当我单击按钮 2、3 或 4 时，没有任何反应，我在这些按钮中实现了 alert()，因此我可以查看脚本是否启动，但它只是没有启动，它仅适用于按钮 1

所有 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 个(除了第一个)同名但为空。这就是为什么只有第一个函数起作用，其他 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 animateown1() 和 function animateown2() 等等，而是编写了一个具有以下签名的函数 function animateContainer( container) - 正如你所看到的，我传递了我想要动画的元素的函数。这样我就可以为我想要的任意数量的容器一次又一次地重复使用相同的功能。