1

現在、一連のボタンを設定しています。各ボタンには、ロールオーバーに関する詳細情報を示すタイトルが付いています。ページのレイアウトは、イントロ セクションが中央に配置され、その周りにボタンが配置されるように設計されています。いずれかのボタンにカーソルを合わせると、機能が起動してイントロが非表示になり、操作されているボタンに関する詳細情報が表示されます。ロールアウト時にイントロをもう一度表示したいのですが、タイムアウトが発生します。

タイムアウトが機能しないという問題がいくつかあります - introshow 機能が起動していないようです。

私は例を単純にしようとしました - 実際には introshow 関数にはいくつかのアニメーションが含まれますが、それは私が問題を抱えているタイムアウト関数であるため関係ありません. jQueryに関しては、私はまだ初心者です！

>>これ用のフィドルも作成しました

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>

誰かが私を助けることができれば、それは素晴らしいことです。

リッチ

4

1 に答える 1

0

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
        });
    });
});
于 2013-06-23T21:16:31.047 に答える