按一下按钮按一下div中的循环值

Question

每次单击按钮时，我都试图向#current元素添加新值。然后，#current元素将该值传递给前一个div。

但是，我在这里遇到的问题是，我正在获取值，并将其传递给以前的div，但是#current上的值没有变化，在循环结束之前保持不变。

我希望#current元素每次单击按钮时都能获得新的值，并且这个新值一直传递给prev div。

// Click-1:
value out:
1:
2:
3:
4:
5:
new value every click: 1234

// Click-2:
value out:
1:
2:
3:
4:
5: 1234
new value every click: 2255

// Click-3:
value out:
1:
2:
3:
4: 1234
5: 2255
new value every click: 3245

// Click-4:
value out:
1:
2:
3: 1234
4: 2255
5: 3245
new value every click: 1413

这是代码：

​

$('button').click(function() {
  var $target = $('div.active');
  if (!$target.length) {
    $('#current').text(Math.floor((Math.random() * 10000) + 1)).addClass('active');
  } else {
    $target.removeClass('active');
    $target.prev('div').addClass('active').text($target.text());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<br/><br/>
<div id="out">value out:</div>
<div id="1">1: </div>
<div id="2">2: </div>
<div id="3">3: </div>
<div id="4">4: </div>
<div id="5">5: </div>
<div id="current">new value every click:</div>

​

以下是JSFiddle链接：https://jsfiddle.net/a26s5oxg/2/

提前感谢您的时间和帮助

Answer 1

要实现这一点，您可以遍历每个div并将其文本设置为与下面的div匹配的文本。如果没有后续的div，那么您就知道您在集合的末尾，需要生成一个新的随机数。试试这个：

​

$('button').click(function() {
  $('.container div span').each(function() {
    $(this).text(function() {
      var $target = $(this).parent().next('div').find('span');      
      return $target.length ? $target.text() : Math.floor((Math.random() * 10000) + 1);
    });
  });
});

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

<div class="container">
  <div id="out">value out: <span></span></div>
  <div id="1">1: <span></span></div>
  <div id="2">2: <span></span></div>
  <div id="3">3: <span></span></div>
  <div id="4">4: <span></span></div>
  <div id="5">5: <span></span></div>
  <div id="current">new value every click: <span></span></div>
</div>

​

注意将<span />元素添加到HTML中，以便更容易地设置值。如果您不这样做，您将不得不深入文本节点，这是不必要的复杂性。