jQuery - нажмите затем показать функцию, затем нажмите еще раз и покажите другую функцию и т. Д. Не нажата и не покажет все функции

Я пытаюсь добиться чего-то, что, когда я нажму на абзац, который будет запускаться 1-й, снова и вторая функция будет выполняться, затем снова нажмите параграф, и 3-я функция будет запущена и т. д. Нет, когда я нажму на абзац, все функции будут работать, я достиг только до 2-й функции, и теперь я ' m застрял.jQuery - нажмите затем показать функцию, затем нажмите еще раз и покажите другую функцию и т. Д. Не нажата и не покажет все функции

Вот код ..

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/1.12.2/jquery.min.js"></script> 
<script> 
$().ready(function(){ 
    $("h1").hide(); 
    $("h2").hide(); 
    $("h3").hide(); 

    function func1(){ 
     $("h1").show(); 
    } 
    function func2(){ 
     $("h2").show(); 
    } 

    function func3(){ 
     $("h3").show(); 
    } 

    function funcme(){ 
     if($("p").click(func1)){ 

      $("h1").show(); 
      $(this).click(func2); 
     } 

    } 
$(this).click(func3); 
    $("p").click(funcme); 

}); 

</script> 
</head> 
<body> 

<p>CLICK ME</p> 
<h1>FUNC 1</h1> 
<h2>FUNC 2</h1> 
<h3>FUNC 3</h1> 

</body> 
</html>

источник

2016-06-13 JackOfAllTrades

alterantive: на щелчку, проверьте, если h1 виден, если он есть, показать h2 ... и т.д. –

вы хотите показать/скрыть функции, но вы показываете/скрываете элементы. Что вы действительно хотите показать/скрыть? – warkentien2

Это может быть более элегантное решение?

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script> 
    $().ready(function(){ 
     var counter = 0; 

     $('.section').hide(); 


     $(".func-me").on('click', function (event){ 
      $('.section').eq(counter).show(); 
      counter++; 
     }); 
    }); 

    </script> 
    </head> 
    <body> 


    <button class="func-me">CLICK ME</button> 
    <p class="section">FUNC 1</p> 
    <p class="section">FUNC 2</p> 
    <p class="section">FUNC 3</p> 

    </body> 
    </html>

https://jsfiddle.net/vnavv1v7/

источник

2016-06-13 16:14:21

Это неправильно. 'click() {}' неверно, должен быть 'click (function() {});' –

Вы правы, я скопировал вставку и редактирование, поэтому его опечатка зафиксирует ее –

И вам нужно обернуть '$ ($ ('. section') [counter]). show();' - i guess ... – ohrstrom

Вы попробуйте создать флаг? Например, ваш флаг установлен в ноль. Затем вы делаете свой первый клик, меняете свой флаг на 1. Затем вы делаете второй щелчок, меняете свой флаг на 2 ... и так далее ...

Я не понимаю, что вам нужно делать в каждом нажмите .. Но я думаю, что-то вроде этого ...

<script> 
    $(document).ready(function(){ 
     $("h1").hide(); 
     $("h2").hide(); 
     $("h3").hide(); 

     var flag = 0; 

     $("p").click(funcme(flag)); 

     function funcme (flag){ 
      if (flag == 0) 
      func1(); 
      if (flag == 1) 
      func2(); 
      if (flag == 2) 
      func3(); 
      flag++; 
     } 

     function func1(){ 
      $("h1").show(); 
     } 

     function func2(){ 
      $("h2").show(); 
     } 

    function func3(){ 
     $("h3").show(); 
    } 
    } 
</script>

источник

2016-06-13 16:26:40

Спасибо за советы, сэр! Я учусь каждый день! – JackOfAllTrades

Добро пожаловать ... :) –

jQuery - нажмите затем показать функцию, затем нажмите еще раз и покажите другую функцию и т. Д. Не нажата и не покажет все функции

ответ

Смежные вопросы