javascript - jQuery 循环在特定位置暂停

Question

我创建的脚本有一个奇怪的问题。我的 jQuery/Javascript 技能不太好(我仍在学习)，希望有人能帮助我理解为什么会发生这种情况。

我正在开发一个在线商店，顶部有一条 4 个 div 并排 float ，上面有我想向客户突出显示的通知。

该网站是响应式的，因此对于移动设备，我希望一次将其减少为一个通知，并淡出和淡入每个通知。

我也不想简单地使用 CSS 媒体查询来显示和隐藏桌面和移动版本，因为我觉得如果我重复内容两次，这可能会对我的 SEO 不利。因此，我编写了一个 jQuery 脚本来获取第一组 div 的内容，将它们放入一个数组中，并在循环中淡入和淡出每个通知。

我以为我已经做到了，但在 Firefox 和 Chrome 中发现了一些奇怪的东西:它一次循环正常，但在第二次显示“100% 幸福保证”时完全停止，我不知所措为什么。

我使用此处使用的代码创建了一个 JSFiddle: http://jsfiddle.net/qewwmnge/

$(document).ready(function() {

    // Transform the highlights div into a 1 line bar for mobile devices

    // Read the highlights div content into an array
    var highlights = new Array();
    $("#highlights").find("div").each(function(){
        highlights.push($(this).html());
    });

    $text = $('#highlights-mobile div'),
    delay = 5;

    // Set the initial highlight item on page load
    $text.html( highlights[0] );

    // Loop through the array and fade in each highlight
    function loop ( delay ) {
        $.each( highlights, function ( i, elm ){
            if ($text.html() != highlights[i]) { // Skip the first fade in on the first loop so it doesn't repeat itself
                $text.delay( delay*1E3).fadeOut();
                $text.queue(function(){
                    $text.html( highlights[i] );
                    $text.dequeue();
                });
                $text.fadeIn();
                $text.queue(function(){
                    if ( i == highlights.length -1 ) {
                        loop(delay);   
                    }
                    $text.dequeue();
                });
            }
        });
    }
    loop( delay );

});

如果有人能告诉我我做错了什么，我将非常感激!

Answer 1

您的 jQuery 代码包含队列/出队逻辑，无需这样做。

最好使用简单的 jquery 来完成同样的事情。请参阅此演示 JSFiddle

$(function () {
    var $highlights = $("#highlights-mobile div");
    var divsHTML = new Array();
	$("#highlights").find("div").each(function(){
	 divsHTML.push($(this).html());
	});
    
    var position = -1;
    
    !function loop() {
        position = (position + 1) % divsHTML.length;
        $highlights.html(divsHTML[position])
        .fadeIn(1000)
        .delay(1000)
        .fadeOut(1000,loop);
    }();
});

#highlights, #highlights-mobile {
	background-color: #E8E8E8;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: auto;
	text-align: center;
	margin-bottom: 20px;
}

#highlights h4, #highlights-mobile h4 {
	text-align: center;
	font-weight: bold;
	padding: 0;
	margin: 0;
	font-size: 1.2em;
}

#highlights-mobile {
	padding: 10px;
}

#highlights-mobile a, #highlights a {
	color: #444;
	text-decoration: none;
}

#highlights div {
	text-align: center;
	padding: 10px;
	border-right: 1px solid #CDCDCD;
	color: #444;
	overflow: auto;
	display: inline-block;
	}



@media (min-width: 768px) {
	#highlights {
		display: block;
	}

	

	#highlights div:last-child {
	border-right: none;
	}
}



@media (min-width: 768px) {
	#highlights div {
	text-align: center;
	padding: 10px;
	border-right: 1px solid #CDCDCD;
	color: #444;
	overflow: auto;
	display: inline-block;
	}

	#highlights div:last-child {
	border-right: none;
	}

	#highlights h4 {
	text-align: center;
	font-weight: bold;
	padding: 0;
	margin: 0;
	font-size: 1.2em;
	}

	#highlights a {
	color: #444;
	text-decoration: none;
	}

	#highlights-mobile {
		display: none;
	}
}



@media (max-width: 767px) {

	#highlights {
		display: none;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="highlights-mobile">
	<div style="display: block;">
	</div>
</div>

<div id="highlights">
	<div>
		<a href="/refurbishment-process"><h4>Professionally refurbished</h4>Old school gear, good as new</a>
	</div>
	<div>
		<h4>Free shipping</h4>On orders over $250, nation wide
	</div>
	<div>
		<a href="/happiness-guarantee"><h4>100% happiness guarantee</h4>Easy returns and a 60 day warranty</a>
	</div>
	<div>
		<a href="/bitcoin"><h4>5% off your order</h4>When you pay with Bitcoin</a>
	</div>
</div>