javascript - jQuery next div点击循环

嘿，我需要一种文字库。如果单击第一个文本，则第二个文本应替换第一个文本，如果单击第二个文本，则第三个文本应替换第二个文本，依此类推。如果单击最后一个文本，则第一个文本应替换最后一个文本。

我从这个开始：

$( ".text" ).click(function() {
$( this ).css("display", "none");
$( next ).css("display", "block");
});

.text {
display: none;
}

.text:hover {
color: blue;
cursor: pointer;
}

.text:nth-child(1) {
display: block;
}

<div class="text">The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt pests such as rodents. About 60 cat breeds are recognized by various cat registries.</div>

<div class="text">The cat is similar in anatomy to the other felid species: it has a strong flexible body, quick reflexes, sharp teeth and retractable claws adapted to killing small prey. Its night vision and sense of smell are well developed. Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling and grunting as well as cat-specific body language.</div>

<div class="text">Female domestic cats can have kittens from spring to late autumn, with litter sizes ranging from two to five kittens.</div>


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

我不知道该怎么写这个函数。有人可以帮我吗？会很酷。

最佳答案

使用next（）并检查长度

var elems = $(".text")
elems.on("click", function() {
  var elem = $(this).css("display", "none");
  var next = elem.next('.text')
  if (!next.length) next = elems.eq(0)
  $(next).css("display", "block");
});

.text {
  display: none;
}

.text:hover {
  color: blue;
  cursor: pointer;
}

.text:nth-child(1) {
  display: block;
}

<div class="text">The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be
  a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt pests such as rodents. About 60 cat breeds are recognized by various cat registries.</div>

<div class="text">The cat is similar in anatomy to the other felid species: it has a strong flexible body, quick reflexes, sharp teeth and retractable claws adapted to killing small prey. Its night vision and sense of smell are well developed. Cat communication includes
  vocalizations like meowing, purring, trilling, hissing, growling and grunting as well as cat-specific body language.</div>

<div class="text">Female domestic cats can have kittens from spring to late autumn, with litter sizes ranging from two to five kittens.</div>


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

或仅删除和添加一个数组

var elems = $(".text")
var arrElems = elems.get()
elems.on("click", function() {
  var elem = $(this).css("display", "none");
  arrElems.push(arrElems.shift())
  $(arrElems[0]).css("display", "block");
});

.text {
  display: none;
}

.text:hover {
  color: blue;
  cursor: pointer;
}

.text:nth-child(1) {
  display: block;
}

<div class="text">The cat (Felis catus) is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be
  a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt pests such as rodents. About 60 cat breeds are recognized by various cat registries.</div>

<div class="text">The cat is similar in anatomy to the other felid species: it has a strong flexible body, quick reflexes, sharp teeth and retractable claws adapted to killing small prey. Its night vision and sense of smell are well developed. Cat communication includes
  vocalizations like meowing, purring, trilling, hissing, growling and grunting as well as cat-specific body language.</div>

<div class="text">Female domestic cats can have kittens from spring to late autumn, with litter sizes ranging from two to five kittens.</div>


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