检查元素是否具有特定的类 JQUERY

Question

我正在构建一个视频游戏。 我有一个包含一名玩家的网格，蓝色方块和障碍物，棕色方块。 此时玩家可以通过单击右键移动一格。 我试过：

$( ".p-0" ).hasClass( "ob" )
alert('collision !!!')

但是当玩家进入障碍物方块时，只有当你再次点击它时才会提醒碰撞。 有没有办法让它在障碍物前警觉？

Jsfiddle在这里

 let moveCounter = 0; var grid = document.getElementById("grid-box"); for (var i = 1; i <= 100; i++) { var square = document.createElement("div"); square.className = 'square'; square.id = 'square' + i; grid.appendChild(square); } var obstacles = []; while (obstacles.length < 10) { var randomIndex = parseInt(99 * Math.random()); if (obstacles.indexOf(randomIndex) === -1) { obstacles.push(randomIndex); var drawObstacle = document.getElementById('square' + randomIndex); $(drawObstacle).addClass("ob") } } var playerOne = []; while (playerOne.length < 1) { var randomIndex = parseInt(99 * Math.random()); if (playerOne.indexOf(randomIndex) === -1) { playerOne.push(randomIndex); var drawPone = document.getElementById('square' + randomIndex); $(drawPone).addClass("p-0") } } var activePlayer = 0; let items = $(".ob").attr("class").split(' '); for (var i = 0; i<items.length; i++) { if (items[i] === '.p-0') { alert('COLLISION') } } if ($( ".p-0" ).hasClass( "ob" )){ alert('collision !!!') } $('#button_right').on('click', function(){ if ($( ".p-0" ).hasClass( "ob" )){ alert('collision !!!') } moveCounter += 1; //console.log(moveCounter); if ($( ".p-0" ).hasClass( "ob" )){ //console.log('found ob') } if (moveCounter >3 ){ moveCounter = 0; } $pOne = $('.p-0') $pOneNext = $pOne.next(); $pOne.removeClass('p-0'); $pOneNext.addClass('p-0'); });

 body{background-color: #b4cdd4} #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; } .ob{ background-color: brown; } .p-0{ background-color: blue; } .p-1{ background-color: yellow; } .move{ text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="grid-box"></div> <div class="move"> <button id="button_right">right</button><br> </div>

Answer 1

您只需要更改点击事件中事物的顺序 - 见下文（代码中的注释）

 let moveCounter = 0; var grid = document.getElementById("grid-box"); for (var i = 1; i <= 100; i++) { var square = document.createElement("div"); square.className = 'square'; square.id = 'square' + i; grid.appendChild(square); } var obstacles = []; while (obstacles.length < 10) { var randomIndex = parseInt(99 * Math.random()); if (obstacles.indexOf(randomIndex) === -1) { obstacles.push(randomIndex); var drawObstacle = document.getElementById('square' + randomIndex); $(drawObstacle).addClass("ob") } } var playerOne = []; while (playerOne.length < 1) { var randomIndex = parseInt(99 * Math.random()); if (playerOne.indexOf(randomIndex) === -1) { playerOne.push(randomIndex); var drawPone = document.getElementById('square' + randomIndex); $(drawPone).addClass("p-0") } } var activePlayer = 0; let items = $(".ob").attr("class").split(' '); for (var i = 0; i < items.length; i++) { if (items[i] === '.p-0') { alert('COLLISION') } } if ($(".p-0").hasClass("ob")) { alert('collision !!!') } $('#button_right').on('click', function() { moveCounter += 1; // do this first if (moveCounter > 3) { moveCounter = 0; } $pOne = $('.p-0') // set your vars here $pOneNext = $pOne.next(); $pOne.removeClass('p-0'); $pOneNext.addClass('p-0'); if ($pOneNext.hasClass("ob")) { // check p1 next not p1 alert('collision !!!') } });

 body { background-color: #b4cdd4 } #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; } .ob { background-color: brown; } .p-0 { background-color: blue; } .p-1 { background-color: yellow; } .move { text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="grid-box"></div> <div class="move"> <button id="button_right">right</button><br> </div>