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
        });
    });
});

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

1 个答案: