javascript - 悬停 3 个框未按预期工作

Question

我有 3 个框，当你将鼠标悬停在它上面时会显示其描述。我的代码按预期工作正常。但是，我想让我的 jquery 代码更短，所以我对其进行了修改，但它不会按预期工作，而且我没有看到代码有任何差异。

这是 html 部分:

 <div id="opf-container">
<div class="s-box-container">
	<div class="s-box" id="cc-home-pr">
		<div class="normal" style="display: block;">
			<span><h2>xxx</h2></span>
		</div>
		<div class="hover" style="display: none;">
		<h2>xxx</h2>
		<hr class="hr-mid">
		<p>lorem epsum</a></span></p>
		<a href="#" id="btn2-lm" class="btn2">LEARN MORE</a>
		</div>
	</div>
</div>
<div class="s-box-container">
	<div class="s-box" id="cc-home-ps">
		<div class="normal" style="display: block;">
			<span><h2>xxx</h2></span>
		</div>
		<div class="hover" style="display: none;">
			<h2>xxxx</h2>
			<hr class="hr-mid">
			<p>lorem epsum</a></span></p>
			<a href="#" id="btn2-lm" class="btn2">LEARN MORE</a>
		</div>
	</div>
</div>
<div class="s-box-container">
	<div class="s-box" id="cc-home-ft">
		<div class="normal" style="display: none;">
			<span><h2>xxx</h2></span>
		</div>
		<div class="hover" style="display: block;">
			<h2>lorem epsum</h2>
			<hr class="hr-mid">
			<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>
			<a href="#" id="btn2-lm" class="btn2">LEARN MORE</a>
		</div>
	</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-box 的 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 并添加了一个 fiddle 以供引用。