循环检查课程并将其交换JavaScript

Question

我创建了一个循环，以检查网格中的所有类。

我有4个盒子（蓝色，橙色，棕色和黄色）蓝色盒子在网格中移动右侧，一旦它进入一个彩色的网格盒子，它们应该与黄色点交换。

我目前仅在橙色和黄色上工作。

因此，循环正在检查类，如果发现该类应交换。

问题是黄色框进入橙色，但反之亦然。

有什么建议吗？

let moveCounter = 0;
let score = 0;
let obs = 10;
document.getElementById('score').textContent = '0';
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 49; i++) {
  var square = document.createElement("div");
  square.className = 'square';
  square.id = 'square' + i;
  grid.appendChild(square);
}
var obstacles = [];
while (obstacles.length < 1) {
  var randomIndex = parseInt(49 * Math.random());
  if (obstacles.indexOf(randomIndex) === -1) {
    obstacles.push(randomIndex);
    var drawObstacle = document.getElementById('square' + randomIndex);
    $(drawObstacle).addClass("ob1")
  }
}
var obstacles = [];
while (obstacles.length < 1) {
  var randomIndex = parseInt(49 * Math.random());
  if (obstacles.indexOf(randomIndex) === -1) {
    obstacles.push(randomIndex);
    var drawObstacle = document.getElementById('square' + randomIndex);
    $(drawObstacle).addClass("ob2")
  }
}
var playerOne = [];
while (playerOne.length < 1) {
  var randomIndex = parseInt(49 * Math.random());
  if (playerOne.indexOf(randomIndex) === -1) {
    playerOne.push(randomIndex);
    var drawPone = document.getElementById('square' + randomIndex);
    $(drawPone).addClass("p-0")
  }
}
var addPoints = $('#score');
$('#button_right').on('click', function() {
  moveCounter += 1;
  $pOne = $('.p-0')
  $pOneNext = $pOne.next();
  $pOne.removeClass('p-0');
  $pOneNext.addClass('p-0');
  if ($(".p-0").hasClass("ob2")) {
  //alert("found")
   selectElementAndCheckClass(".ex_box", "def", "ob1", "ob2")
  }
});
function selectElementAndCheckClass(element, className) {
let arrOfClasses = $(element).attr('class').split(" ");
for (var i = 0; i < arrOfClasses.length; i++) {
if (arrOfClasses[i] === className) {
alert('HELP'); //SWAP CLASSES
$('.ex_box').removeClass('def');
$('.ob2').addClass('def');
$('ex_box').addClass('ob2');
$('.ob2').removeClass('ob2');
} else {
alert("not found")
}
}
}

#grid-box {
   width: 400px;
   height: 400px;
   margin: 0 auto;
   font-size: 0;
   position: relative;
 }
 #grid-box>div.square {
   font-size: 1rem;
   vertical-align: top;
   display: inline-block;
   width: 10%;
   height: 10%;
   box-sizing: border-box;
   border: 1px solid #000;
 }
 .ob1 {
   background-color: brown;
 }
 .ob2 {
   background-color: orange;
 }
 .p-0 {
   background-color: blue;
 }
 .move {
   text-align: center;
 }
 .ex_box {
   height: 32px;
   width: 32px;
   border: solid 2px black;
 }
 .def {
   background-color: yellow;
 }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box">
</div>
<div class="move">
  <button id="button_right">right</button><br>
</div>
<div class="ex_box def" id="score">
</div>

Answer 1

假设您想交换颜色：

$('.ob2').addClass('def');
$('.ob2').removeClass('ob2');
$('.ex_box').addClass('ob2');
$('.ex_box').removeClass('def');

由于您的.def具有yellow颜色，并且.ob2具有orange颜色。逻辑是让橙色具有黄色，然后从中取出橙色。然后让黄色具有橙色，然后去除黄色。

摘要：

let moveCounter = 0;
let score = 0;
let obs = 10;
document.getElementById('score').textContent = '0';
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 49; i++) {
  var square = document.createElement("div");
  square.className = 'square';
  square.id = 'square' + i;
  grid.appendChild(square);
}
var obstacles = [];
while (obstacles.length < 1) {
  var randomIndex = parseInt(49 * Math.random());
  if (obstacles.indexOf(randomIndex) === -1) {
    obstacles.push(randomIndex);
    var drawObstacle = document.getElementById('square' + randomIndex);
    $(drawObstacle).addClass("ob1")
  }
}
var obstacles = [];
while (obstacles.length < 1) {
  var randomIndex = parseInt(49 * Math.random());
  if (obstacles.indexOf(randomIndex) === -1) {
    obstacles.push(randomIndex);
    var drawObstacle = document.getElementById('square' + randomIndex);
    $(drawObstacle).addClass("ob2")
  }
}
var playerOne = [];
while (playerOne.length < 1) {
  var randomIndex = parseInt(49 * Math.random());
  if (playerOne.indexOf(randomIndex) === -1) {
    playerOne.push(randomIndex);
    var drawPone = document.getElementById('square' + randomIndex);
    $(drawPone).addClass("p-0")
  }
}
var addPoints = $('#score');
$('#button_right').on('click', function() {
  moveCounter += 1;
  $pOne = $('.p-0')
  $pOneNext = $pOne.next();
  $pOne.removeClass('p-0');
  $pOneNext.addClass('p-0');
  if ($(".p-0").hasClass("ob2")) {
  //alert("found")
   selectElementAndCheckClass(".ex_box", "def", "ob1", "ob2")
  }
});
function selectElementAndCheckClass(element, className) {
let arrOfClasses = $(element).attr('class').split(" ");
for (var i = 0; i < arrOfClasses.length; i++) {
if (arrOfClasses[i] === className) {
alert('HELP'); //SWAP CLASSES
$('.ob2').addClass('def');
$('.ob2').removeClass('ob2');
$('.ex_box').addClass('ob2');
$('.ex_box').removeClass('def');
} else {
alert("not found")
}
}
}

#grid-box {
   width: 400px;
   height: 400px;
   margin: 0 auto;
   font-size: 0;
   position: relative;
 }
 #grid-box>div.square {
   font-size: 1rem;
   vertical-align: top;
   display: inline-block;
   width: 10%;
   height: 10%;
   box-sizing: border-box;
   border: 1px solid #000;
 }
 .ob1 {
   background-color: brown;
 }
 .ob2 {
   background-color: orange;
 }
 .p-0 {
   background-color: blue;
 }
 .move {
   text-align: center;
 }
 .ex_box {
   height: 32px;
   width: 32px;
   border: solid 2px black;
 }
 .def {
   background-color: yellow;
 }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box">
</div>
<div class="move">
  <button id="button_right">right</button><br>
</div>
<div class="ex_box def" id="score">
</div>