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

修改：从this选择器中删除了$("div.s-box-container")并添加了一个小提琴以供参考。

悬停3个盒子没有按预期工作

1 个答案: