Pete的社区主页

$("#login-form").submit(function(e) { e.preventDefault(); if ($(this).valid()) { // this assumes you are using something like jquery validate - from your original code, it looks like you were attempting to do this $(".modal").addClass("active"); } else { // do error stuff here } });

您只需要更改click事件中的顺序-请参见下面的(代码中的注释)

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>