javascript - jQuery下一个div点击循环

Question

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

我从这个开始:

$( ".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>

我不知道如何编写这个函数。有人可以帮助我吗？那就太酷了。

Answer 1

使用 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>