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

Question

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

这是我的 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

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

Answer 2

试试这个：你是运行只有一个 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>

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

How to get this jQuery code to work on identical html elements?

html

javascript

css

jquery

dry