javascript - 如何让这个 jQuery 代码在相同的 html 元素上工作？

Question

我想为我的所有 div 元素使用一个 jQuery 代码，类为 TextWrapper，但我不确定该怎么做。 jQuery 代码在带有字符串“Text”和“MoreText”的两个不同 div 之间闪烁。但是我使用的代码只适用于第一个元素，而不适用于顺序元素。我只能通过复制 jQuery 代码并编辑 .TextWrapper 标题来让它工作，但如果知道有速记，这样做会很乏味和重复。

这是我的 jQuery 代码；第二个函数是第一个函数的副本，除了 .TextWrapper 标题中的更改:

$(function(){
    $(".TextWrapper div:gt(0)").hide();
    setInterval(function(){
        var current = $('.TextWrapper div:visible');
        var next = current.next().length ? current.next() : $('.TextWrapper div:eq(0)');
        current.fadeOut(500);
        next.fadeIn(500);
    }, 1000);
});  

$(function(){
    $(".TextWrapper2 div:gt(0)").hide();
    setInterval(function(){
        var current = $('.TextWrapper2 div:visible');
        var next = current.next().length ? current.next() : $('.TextWrapper2 div:eq(0)');
        current.fadeOut(500);
        next.fadeIn(500);
    }, 1000);
});  

如何将这段代码缩短为单个 jQuery 代码，以便它可以使用相同的代码处理我所有的 html 元素？我还添加了我的 html 和 css，谢谢你的帮助

$(function(){
	"use strict";
	$(".TextWrapper div:gt(0)").hide();
	setInterval(function(){
		var current = $('.TextWrapper div:visible');
		var next = current.next().length ? current.next() : $('.TextWrapper div:eq(0)');
		current.fadeOut(500);
		next.fadeIn(500);
	}, 1000);
});

.Border {
	border: 1px solid black;
	display: inline-flex;
	height: 110px;
}
.Img {
	width: 75px;
	height:75px;
}
.TextWrapper {
	font-family: Helvetica;
	font-size: 13px;
	padding: 5px 5px 5px 5px;
	position: relative;
	text-align: center;
}
.TextWrapper div {
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="Border">
	<div class="ImgAndText"> 
		<img src="#" class="Img">
		<div class="TextWrapper">
			<div>Text</div>
			<div>MoreText</div>
		</div>
	</div>	
</div>

<div class="Border">
	<div class="ImgAndText"> 
		<img src="#" class="Img">
		<div class="TextWrapper">
			<div>Text</div>
			<div>MoreText</div>
		</div>
	</div>	
</div>

Answer 1

试试这个:您只为一个 TextWrapper div 运行代码。用户 .each() 将一一考虑所有 TextWrapper div。看下面代码

$(function(){
	"use strict";
	$(".TextWrapper div:gt(0)").hide();
	setInterval(function(){
       $('.TextWrapper').each(function(){
		var current = $(this).find('div:visible');
		var next = current.next().length ? current.next() : $(this).find('div:first');
		current.fadeOut(500);
		next.fadeIn(500);
     });
	}, 1000);
});

.Border {
	border: 1px solid black;
	display: inline-flex;
	height: 110px;
}
.Img {
	width: 75px;
	height:75px;
}
.TextWrapper {
	font-family: Helvetica;
	font-size: 13px;
	padding: 5px 5px 5px 5px;
	position: relative;
	text-align: center;
}
.TextWrapper div {
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="Border">
	<div class="ImgAndText"> 
		<img src="#" class="Img">
		<div class="TextWrapper">
			<div>Text</div>
			<div>MoreText</div>
		</div>
	</div>	
</div>

<div class="Border">
	<div class="ImgAndText"> 
		<img src="#" class="Img">
		<div class="TextWrapper">
			<div>Text</div>
			<div>MoreText</div>
		</div>
	</div>	
</div>