Использование jquery для переключения между различными функциями и не возобновление работы с места - PullRequest
Новая
       8

Использование jquery для переключения между различными функциями и не возобновление работы с места

1 голос
/ 29 мая 2009

Код первой функции показывает три разных div в течение определенного интервала 5 секунд (div1, div2, div3).
Код второй функции, используемой для прекращения показа div.

показывая div2, я щелкнул ссылку, чтобы остановиться в тот момент, когда он был остановлен.
Но после этого я щелкнул по нему еще раз, и он показывает div1 (он переключается нормально), но я хотел бы продолжить следующее действие, которое было div3.

Код запроса: 

$(function() {

 var IntervalId;

 function first_function() {
 var counter = 0,
 divs = $('#div1,#div2,#div3');
 function showDiv () {
           divs.hide() // hide all divs
          .filter(function (index) { return index == counter % 3; }) 
          .show('fast'); // and show it
          counter++;
 }; 
 showDiv();     
 IntervalId = setInterval(showDiv, 5000);
 }; 

 function second_function(){  
  clearInterval(IntervalId); 
 }  

 $("#link1").toggle(
 first_function,second_function
 );

});

Код HTML: 

<a href="javascript:void(0);" id="link1">Toggle</a>

Ответы [ 2 ]

2 голосов
/ 29 мая 2009

переместить инициализацию счетчика за пределы first_function (): 

$(function() {

 var IntervalId;
 var counter = 0,

 function first_function() {
 divs = $('#div1,#div2,#div3');
 ...

В вашем примере, каждый раз, когда вы вызываете first_function (), счетчик обнуляется.

0 голосов
/ 29 мая 2009

Веселитесь с: 

<script type="text/javascript">
$(function() {
  var divFunctions = [];
  var $divs = $('#div1,#div2,#div3');

  $divs.each(function() {
    var $this = $(this);
    divFunctions.push(function() {
      return function() {
        $divs.not($this).hide();
        $this.show("fast")
      };
    }());
  });

  var $toggle_button = $("#link1");
  $toggle_button.toggle.apply($toggle_button, divFunctions);
});
</script>

<body>
  <a href="javascript:void(0);" id="link1">Toggle</a>

  <div id='div1' style="display:none;">content1</div>
  <div id='div2' style="display:none;">content2</div>
  <div id='div3' style="display:none;">content3</div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...