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

2019-11-01 22:37:26 阅读：398 来源： 互联网

标签：jquery-animate onclick javascript

好吧,我有这种情况

        <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个(animationown3和4)

好吧…基本思想是：
我有4个按钮,它们被列出(button0和button5不做任何事情,它们只是被列出)
例如,在单击button1时,应该显示textcontainer1并隐藏之前显示的任何内容

基本上是一个动画菜单,没有指向其他页面的链接,都在一个页面中.

现在,仅当我单击button1时它才起作用,它隐藏了textcontainer1(我知道应该显示它,这只是看按钮是否起作用),这很好.问题在这里：
当我单击button2,3或4时,什么都没发生,我已经在那些按钮中实现了alert(),因此我可以查看脚本是否启动,但是脚本没有启动,仅适用于button1

所有4个函数几乎都是相同的,但是如果我发现如果我用$(“#textContainer2”)用$(“#textContainer1”)切换$(“#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个)名称相同但为空.这就是为什么只有第一个函数起作用,其他三个函数被页面底部的空函数覆盖的原因.

解决方法:

我认为解决此问题的最佳方法是重用同一功能.
在此处检查代码,并告诉我它是否解决了您的问题.

<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>

这是如何运作的？

好吧-我一次又一次编写了该函数,而不是一次又一次地复制粘贴相同的函数,而是传递了要设置动画的容器.

我编写了具有以下签名函数animateContainer(container)的单个函数,而不是编写函数animatedown1()和函数animatedown2()等等,就像您看到的那样,我传递了要对元素进行动画处理的函数.
这样,我可以一次又一次地对任意数量的容器重复使用相同的功能.

标签：jquery-animate,onclick,javascript
来源： https://codeday.me/bug/20191101/1986823.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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