javascript - Jquery通过递归改变颜色

Question

这里是 jsfiddle原始代码和结果应该像this

<div class="wrapper">
 <div class="row">
  <div class="col red">R</div>
  <div class="col blue">B</div>
  <div class="col green">G</div>
  <div class="col orange">O</div>
 </div>
</div>

任务是:上一行的最后一种颜色应该是下一行的第一种颜色，前一行的第一种颜色应该是下一行的第二种颜色。

我认为我必须使用循环和递归，但我没有足够的知识来做到这一点。

提前致谢:)

Answer 1

您可以运行 for 循环并执行类似这样的操作

检查这个片段

//last color of previous row should be first in next row

//first color from previous row should be second in next row
var colors = ['red', 'blue', 'green', 'orange'];
$(document).ready(function() {
  var rows = $('.row');
  rows.each(function(row) {
    var index = $(this).index();
    var prevRow;
    if (index > 0)
      prevRow = $(this).prev();
    colorColumns($(this).find('.col'), prevRow);
  });
});

function colorColumns(cols, prevRow) {
  var index = 0;
  // alert("hi");
  cols.each(function(col) {
    var colIndex = $(this).index();

    if (prevRow) {
      var cols = prevRow.find('.col').length;
      var totalCols = cols - 1;

      var currentIndex = ((colIndex + totalCols) % cols);
      var prevRowColor = $(prevRow).find('.col').eq(currentIndex);
      var classes = prevRowColor.attr('class');
      var classArr = classes.split(" ");

      $(this).addClass(classArr[1]);

    } else {

      $(this).addClass(colors[colIndex]);
    }
  });

}

.row {
  display: flex;
}
.row .col {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  text-align: center;
}
.red {
  background: red;
}
.orange {
  background: orange;
}
.blue {
  background: blue;
}
.green {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row">
    <div class="col">R</div>
    <div class="col">B</div>
    <div class="col">G</div>
    <div class="col">O</div>
  </div>
  <div class="row">
    <div class="col">R</div>
    <div class="col">B</div>
    <div class="col">G</div>
    <div class="col">О</div>
  </div>
  <div class="row">
    <div class="col">R</div>
    <div class="col">B</div>
    <div class="col">G</div>
    <div class="col">O</div>
  </div>

希望对你有帮助