多个 jQuery 翻转/退出按钮超时问题？

Question

我目前正在设置一系列按钮，每个按钮都有一个标题，可以显示更多关于翻转的信息。页面布局的设计使介绍部分位于中间，周围有按钮。滚动任何按钮会触发一个隐藏介绍的功能，然后显示有关正在与哪个按钮交互的更多信息。在推出时，我希望再次显示介绍，但在超时之后。

我遇到了一些超时不工作的问题 - introshow 函数似乎没有触发。

我试图让示例保持简单 - 实际上 introshow 函数将包含一些动画，但这与我遇到问题的超时函数无关。说到 jQuery，我还是个新手！

>> I've created a fiddle for this also

JS：

    $(document).ready(function() {

      $('div.pcontents > div').addClass('hidden');

      $('.person').each(function() {
        var theClass = $(this).attr('id');
        var $person = $(this)

        $person.hover(

        function() { // RollOver
           var index = 0;
          console.log('roll over')
          introhide();
          $('.pcontents .' + theClass).removeClass('hidden');
          $person.addClass('active');

        }, function() { // RollOut
          console.log('roll out')
          $('.pcontents .' + theClass).addClass('hidden');
          $person.removeClass('active');
          $(function() {

            setTimeout(function() {
              introshow();
            }, 2000 + index++);

          });
        });

      });

      var introhide = function() {
        $('#intro').addClass('hidden');
      }
      var introshow = function() {
        $('#intro').removeClass('hidden');
      }

    });

这里是 HTML

<div id="wrap">

<div id="persons">

    <dl class="person" id="pone">
        <dd>The first person</dd>
    </dl>   

    <dl class="person" id="ptwo">
        <dd>The second person</dd>
    </dl>   

    <dl class="person" id="pthree">
        <dd>The third person</dd>
    </dl>   

    <dl class="person" id="pfour">
        <dd>The forth person</dd>
    </dl>
</div>

<div class="pcontents">
    <div class="pone">  
        <h3>Person One</h3>
        <p>Description one</p>
    </div>
    <div class="ptwo">  
        <h3>Person two</h3>
        <p>Description two</p>
    </div>
    <div class="pthree">  
        <h3>Person three</h3>
        <p>Description three</p>
    </div>
    <div class="pfour">  
        <h3>Person four</h3>
        <p>Description four</p>
    </div>

</div>

<div id="intro">
    <p>This is the intro</p>
</div>

如果有人可以帮助我，那就太好了。

丰富

Answer 1

ReferenceError: index is not defined

index 变量的作用域使其他函数无法访问它，该函数无法“看到它”。您需要将其移到函数定义之外，以便所有函数都可以访问：

$(document).ready(function(){
    var index = 0,
    timeout = 0,
    introhide = function() {
        $('#intro').addClass('hidden');
    },
    introshow = function() {
        $('#intro').removeClass('hidden');
    };

    $('div.pcontents > div').addClass('hidden');
    $('.person').each(function(){
        var $person = $(this),
        theClass = $this.attr('class');

        $person.hover(function(){ // RollOver
            if (timeout) {
                clearTimeout(timeout);
                timeout = 0;
            }

            introhide();
            $('.pcontents .' + theClass).removeClass('hidden');
            $person.addClass('active');
        },function(){ // RollOut
            if (timeout) {
                clearTimeout(timeout);
                timeout = 0;
            }

            $('.pcontents .' + theClass).addClass('hidden');
            $person.removeClass('active');

            timeout = setTimeout(function() {
                introshow();
            }, 2000 * index++); // Delay will grow after each hover event
        });
    });
});