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

Question

我想为我的所有 div 元素使用一个单独的 jQuery 代码，类为TextWrapper，但我不知道该怎么做。 jQuery 代码在两个不同的 div 之间闪烁，字符串为“Text”和“MoreText”。但是我使用的代码仅适用于第一个元素，而不适用于顺序元素。我只能通过复制 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>

Answer 2

您可以在一个查询中使用多个 jQuery 选择器：$(".TextWrapper div:gt(0), .TextWrapper div:gt(0)")