одна кнопка работает, другие нет, тот же скрипт - PullRequest
Новая
       11

одна кнопка работает, другие нет, тот же скрипт

3 голосов
/ 01 января 2012

Хорошо, я получил эту ситуацию 

        <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 ничего не делают, они только что перечислены) При нажатии, например, кнопки 1, текстовый контейнер1 должен отображаться и скрывать все, что было показано до

В основном анимированное меню без ссылок на другие страницы, все на одной странице.

Теперь это работает, только если я нажимаю кнопку 1, оно скрывает textcontainer1 (я знаю, что оно должно показать это, это просто посмотреть, работает ли кнопка), и это хорошо. Проблема здесь: когда я нажимаю кнопку 2, 3 или 4, ничего не происходит, я внедряю функцию alert () в эти кнопки, чтобы я мог видеть, запускается ли скрипт, но он просто не запускается, он работает только для button1

все 4 функции почти идентичны, но если я узнал, что если я переключаю в animatedown1 () часть $ ("# textContainer1") с $ ("# textContainer2"), это работает для textContainer2 .. так что я думаю, что почему-то работает только первая функция.

Любая помощь будет принята с благодарностью.

PS: я пытался сделать это с 

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

но здесь я не могу сделать так, чтобы он регистрировал мой щелчок по меню-1 (также пытался с помощью кнопок ID2 и abutton2) Любое решение с .click или с функцией onclick приветствуется.

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

РЕДАКТИРОВАТЬ: я обнаружил, что было не так ... когда я проверил свой javascript, я увидел, что чуть ниже всех 4 функций, были еще 3 (кроме 1-го) с тем же именем, но пустой. Вот почему работала только 1-я функция, остальные 3 были перезаписаны пустыми в нижней части страницы.

1 Ответ

4 голосов
/ 01 января 2012

Я думаю, что лучший способ решить эту проблему - повторно использовать ту же функцию.Проверьте код здесь и скажите мне, если это решило вашу проблему.

<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) - как вы видите, я передаю функции, какой элемент я хочу анимировать.Таким образом, я могу снова и снова использовать одну и ту же функцию для любого количества контейнеров, которые я хочу.

...