Question

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

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

此刻我只在橙色和黄色上工作。

因此，循环正在检查是否找到了要交换的类。

问题在于，黄色框变成橙色框，反之亦然。

有什么建议吗？

list_display_links = None

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;
 }

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>

循环检查类并交换JavaScript

1 个答案: