Question

我想定义大约4个不同的引号（新文本1，新文本2，新文本3和新文本4），并将它们显示在具有特定类别（培训）的列表项中。我想保留1,2,3和4的加载顺序，然后重新开始。

我尝试使用css并编写如下内容：

    .training:nth-child(1) p::after {content: " New text 1";}
    .training:nth-child(2) p::after {content: " New text 2";}
    .training:nth-child(3) p::after {content: " New text 3";}
    .training:nth-child(4) p::after {content: " New text 4";}

但是这没有用，因为在列表下面我调用了一个jQuery，它实际上向包含的div添加了一个属性。

我尝试添加一个空跨度并使用jQuery并执行类似的操作：

    <script>
    $(function() {
        var addition = new Array(" New text 1", " New text 2", " New text 3", " New text 4"),
        randno = addition[Math.floor( Math.random() * addition.length )];
        $('.training span').text(randno);
    });
    </script>

这已经接近了，但是它在每个列表项中传递了相同的文本，在这里我需要它们成为连续顺序（1、2、3、4、1、2、3、4等）的完整数组。

有人知道该怎么做吗？

这是现有代码：

    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>

这是需要显示的内容：

    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text. New text 1</p></li>
    <li class="training"><p>Existing variable text. New text 2</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text. New text 3</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text. New text 4</p></li>
    <li class="training"><p>Existing variable text. New text 1</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text. New text 2</p></li>
    etc.

有人有主意吗？

Answer 1

您可以这样做：

$(function() {
  var addition = new Array(" New text 1", " New text 2", " New text 3", " New text 4")
  $('.training span').text(function() {
    var randno = addition[Math.floor(Math.random() * addition.length)];
    return randno;
  });
});

请不要让您的html不包含任何<span>，所以我已将它们添加到您的li.training

工作示例

$(function() {
  var addition = new Array(" New text 1", " New text 2", " New text 3", " New text 4")
  $('.training span').text(function() {
    var randno = addition[Math.floor(Math.random() * addition.length)];
    return randno;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="tournament">
  <p>Existing variable text.</p>
</li>
<li class="training">
  <p>Existing variable text.<span></span></p>
</li>
<li class="training">
  <p>Existing variable text.<span></span></p>
</li>
<li class="tournament">
  <p>Existing variable text.</p>
</li>
<li class="training">
  <p>Existing variable text.<span></span></p>
</li>
<li class="tournament">
  <p>Existing variable text.</p>
</li>
<li class="training">
  <p>Existing variable text.<span></span></p>
</li>
<li class="training">
  <p>Existing variable text.<span></span></p>
</li>
<li class="tournament">
  <p>Existing variable text.</p>
</li>
<li class="training">
  <p>Existing variable text.</p>
</li>

如果您想覆盖现有文本，请使用此

$(function() {
  var addition = new Array(" New text 1", " New text 2", " New text 3", " New text 4")
  $('.training').text(function(i, x) {
    var randno = addition[Math.floor(Math.random() * addition.length)];
    return x + randno;
  });
});

$(function() {
  var addition = new Array(" New text 1", " New text 2", " New text 3", " New text 4")
  var t = 0;
  $('.training').text(function(i, x) {
    var randno = addition[t];
    t = (t == 3 ? 0 : (t + 1));
    return x + randno;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="tournament">
    <p>Existing variable text.</p>
  </li>
  <li class="training">
    <p>Existing variable text.</p>
  </li>
  <li class="training">
    <p>Existing variable text.</p>
  </li>
  <li class="tournament">
    <p>Existing variable text.</p>
  </li>
  <li class="training">
    <p>Existing variable text.</p>
  </li>
  <li class="tournament">
    <p>Existing variable text.</p>
  </li>
  <li class="training">
    <p>Existing variable text.</p>
  </li>
  <li class="training">
    <p>Existing variable text.</p>
  </li>
  <li class="tournament">
    <p>Existing variable text.</p>
  </li>
  <li class="training">
    <p>Existing variable text.</p>
  </li>
</ul>

如何在某些列表项之后显示4个不同的文本并重新开始

1 个答案: