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>

请注意，在HTML中添加了<span />元素，以便更轻松地设置值。如果您不这样做，则必须遍历文本节点，这是不必要的复杂性。

单击按钮以div为单位的循环值

1 个答案: