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个函数几乎完全相同，但是如果我发现如果我在$（“＃textContainer2”）中切换animatedown1（）部分$（“＃textContainer1”）它适用于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)的函数 - 你可以看到我传递了我想要的函数动画。这样我就可以一次又一次地为我想要的任意数量的容器重复使用相同的功能。

一个按钮工作，其他不工作，相同的脚本

1 个答案: