ホバー3つのボックスが期待通りに機能しない

Question

ホバーすると3つのボックスがあり、その説明が表示されます。私のコードは正常に動作しています。しかし、私はjQueryコードを短くしてそれを改訂したいと思っていますが、期待通りに動作せず、コードの違いは見られません。ここで

HTMLの一部です：

<div id="opf-container"> 
 
<div class="s-box-container"> 
 
\t <div class="s-box" id="cc-home-pr"> 
 
\t \t <div class="normal" style="display: block;"> 
 
\t \t \t <span><h2>xxx</h2></span> 
 
\t \t </div> 
 
\t \t <div class="hover" style="display: none;"> 
 
\t \t <h2>xxx</h2> 
 
\t \t <hr class="hr-mid"> 
 
\t \t <p>lorem epsum</a></span></p> 
 
\t \t <a href="#" id="btn2-lm" class="btn2">LEARN MORE</a> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<div class="s-box-container"> 
 
\t <div class="s-box" id="cc-home-ps"> 
 
\t \t <div class="normal" style="display: block;"> 
 
\t \t \t <span><h2>xxx</h2></span> 
 
\t \t </div> 
 
\t \t <div class="hover" style="display: none;"> 
 
\t \t \t <h2>xxxx</h2> 
 
\t \t \t <hr class="hr-mid"> 
 
\t \t \t <p>lorem epsum</a></span></p> 
 
\t \t \t <a href="#" id="btn2-lm" class="btn2">LEARN MORE</a> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<div class="s-box-container"> 
 
\t <div class="s-box" id="cc-home-ft"> 
 
\t \t <div class="normal" style="display: none;"> 
 
\t \t \t <span><h2>xxx</h2></span> 
 
\t \t </div> 
 
\t \t <div class="hover" style="display: block;"> 
 
\t \t \t <h2>lorem epsum</h2> 
 
\t \t \t <hr class="hr-mid"> 
 
\t \t \t <p>lorem epsum<span class="highlight-w"><a href="#">Become a member</a></span> of the CardsChat forum to access exclusive freerolls and online poker games &amp; tournaments</p> 
 
\t \t \t <a href="#" id="btn2-lm" class="btn2">LEARN MORE</a> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
</div>

ここでは私のjqueryのコードです：

var timer1; 
    $("#cc-home-pr").hover(function() { 
      clearTimeout(timer1); 
      $("#cc-home-pr .hover").fadeIn(300); 
      $("#cc-home-pr .normal").fadeOut(300); 
     }, function() { 
      boxId = '#' + $(this).attr('id'); 
      timer1 = setTimeout(function() { 
       $("#cc-home-pr .hover").fadeOut(300); 
       $("#cc-home-pr .normal").fadeIn(300); 
      }, 300); 
    }); 


    var timer2; 
    $("#cc-home-ps").hover(function() { 
      clearTimeout(timer2); 
      boxId = '#' + $(this).attr('id'); 
      $("#cc-home-ps .hover").fadeIn(300); 
      $("#cc-home-ps .normal").fadeOut(300); 
     }, function() { 
      boxId = '#' + $(this).attr('id'); 
      timer2 = setTimeout(function() { 
       $("#cc-home-ps .hover").fadeOut(300); 
       $("#cc-home-ps .normal").fadeIn(300); 
      }, 300); 
    }); 

    var timer3; 
    $("#cc-home-ft").hover(function() { 
      clearTimeout(timer3); 
      boxId = '#' + $(this).attr('id'); 
      $("#cc-home-ft .hover").fadeIn(300); 
      $("#cc-home-ft .normal").fadeOut(300); 
     }, function() { 
      boxId = '#' + $(this).attr('id'); 
      timer3 = setTimeout(function() { 
       $("#cc-home-ft .hover").fadeOut(300); 
       $("#cc-home-ft .normal").fadeIn(300); 
      }, 300); 
    }); 

上記のjQueryのコードが正常に動作しています。予想通り、それはあなたが箱を置くと、その後、他のボックスは元の状態を復元しません動作しませんときにコードにただし

var timerBox = []; 
$("div.s-box-container", this).hover(function() { 
     boxIndex = $(this).index(); 
     clearTimeout(timerBox[boxIndex]); 
     boxId = '#' + $(".s-box",this).attr('id'); 
     $(boxId + " .hover").fadeIn(300); 
     $(boxId + " .normal").fadeOut(300); 
    }, function() { 
     timerBox[boxIndex] = setTimeout(function() { 
      $(boxId + " .hover").fadeOut(300); 
      $(boxId + " .normal").fadeIn(300); 
     }, 300); 
}); 

：私はので、私はこのようなコードを改訂し、それを短くすることにしました。

Answer 1

は、内側.S-ボックスのIDによってタイマーのコレクションのインデックスを作成してみてください：

var timerBox = []; 
$("div.s-box-container").hover(function() { 
     var boxId = $(".s-box",this).attr('id'); 
     clearTimeout(timerBox[boxId]); 
     $("#" + boxId + " .hover").fadeIn(300); 
     $("#" + boxId + " .normal").fadeOut(300); 
    }, function() { 
     var boxId = $(".s-box",this).attr('id'); 
     timerBox[boxId] = setTimeout(function() { 
      $("#" + boxId + " .hover").fadeOut(300); 
      $("#" + boxId + " .normal").fadeIn(300); 
     }, 300); 
}); 

JSFiddle

編集：$("div.s-box-container")セレクタからthisを除去し、参考のためにフィドルを添加しました。