jQuery .not() and :not with new classes?

Question

I have some card to flip and check if one is equal to another (memory game).

If I flip the card, I don't want that is possible to click and run function if I click on the same card (that is .flipped) or on another that is flipped. But jQuery .not() and :not not working. Maybe I must read another time the DOM after .toggleClass?

$(".card:not('.flipped')").on("click", function () {
    $(this).toggleClass("flipped");

    if (first) {
        firstCard = $(this).attr("game");
        first = false;
    } else {
        secondCard = $(this).attr("game");
        first = true;
        checkGame();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

because you are selecting them and adding the event. it does not dynamically add and remove. — epascarello, Oct 13 '20 at 15:34

epascarello · Accepted Answer · 2020-10-13T15:43:34.723

The code is binding the events when it is called. So whatver the classes are at that moment in time, is what it finds and binds the event.

So you need to check for the class inside of the method and exit it

$(".card").on("click", function() {
  var card = $(this);
  if (card.hasClass("flipped")) return;
  console.log(this);
  card.addClass("flipped");
});

.wrapper {
  display: flex;
}

.wrapper > .card {
  flex: 1;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
}

.card.flipped {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>  
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>  
  <div class="card">7</div>
  <div class="card">8</div>
</div>

Other option is using event delegation where you bind the event to the parent and element and have jQuery do the checking if the class is added yet.

$(".wrapper").on("click", ".card:not('.flipped')", function() {
  console.log(this);
  var card = $(this);
  card.addClass("flipped");
});

.wrapper {
  display: flex;
}

.wrapper > .card {
  flex: 1;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
}

.card.flipped {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>  
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>  
  <div class="card">7</div>
  <div class="card">8</div>
</div>

High five, same answer. – Jeremy Thille Oct 13 '20 at 15:40 — Jeremy Thille, Oct 13 '20 at 15:40

score 0 · Answer 2 · answered Oct 13 '20 at 15:39

Apply the click event to all cards.
On click, check if the card is flipped. If it is, do nothing.
Cache your jQuery objects.

    $(".card").on("click", function() {
        const $card = $(this);
        if ($card.hasClass("flipped")) return;
        $card.toggleClass("flipped");
        // .........
    });

score 0 · Answer 3 · answered Oct 13 '20 at 15:40

you have to check it inside your event 'click'. if the card has class 'flipped' break it

$(".card").on("click", function () {
    if($(this).hasClass('.flipped')) return;
    $(this).toggleClass("flipped");

    if (first) {
        firstCard = $(this).attr("game");
        first = false;
    } else {
        secondCard = $(this).attr("game");
        first = true;
        checkGame();
    }
});

jQuery .not() and :not with new classes?

3 Answers3