CODEWITHSUNDEEP
javascriptjqueryjquery-click-event
writingdeveloper
writingdeveloper

Reputation: 1076

jQuery multi click event check

You can access full code with github pages link below. Link

In HTML Code looks like this.

<ul class="deck">
            <li class="card">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card">
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card">
                <i class="fa fa-cube"></i>
            </li>
            <li class="card">
                <i class="fa fa-anchor"></i>
            </li>
            <li class="card">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card">
                <i class="fa fa-diamond"></i>
            </li>
            <li class="card">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card">
                <i class="fa fa-leaf"></i>
            </li>
            <li class="card">
                <i class="fa fa-bomb"></i>
            </li>
            <li class="card">
                <i class="fa fa-bolt"></i>
            </li>
            <li class="card">
                <i class="fa fa-bicycle"></i>
            </li>
            <li class="card">
                <i class="fa fa-paper-plane-o"></i>
            </li>
            <li class="card">
                <i class="fa fa-cube"></i>
            </li>

and the JavaScript Code is like this.

$(document).ready(function () {
    $('.card').click(function () {
        // Card Open
        $(this).addClass("open show");

        // Save First Click i element className
        let firstclick = ($(this).children('.fa'));
        console.log(firstclick);
        // Save Second Click i element className
        let secondclick = ($(this).children('.fa'));
        console.log(secondclick);

        // compare first click element and second element to match card
        if (firstclick === secondclick) {
            // if match each other change card class to "card match"
            $(this).removeClass("open show");
            $(this).addClass("match")
        } else {
            // if not match each other close card after 2 seconds.
            let ele = $(this);
            setTimeout(function () {
                ele.removeClass("open show");
            }, 2000);
        }
    })
});

As you can see my comment. When I click the li element, check i tag which is inside the li element and save it into firstclick variable. and secondclick also the same. And compare each other and if it is match change class to "card match" but if not, after 2 seconds it should change "card" class to close the card.

but I have some question how can I save the firstclick and secondclick In my console.log when I click the li element it just save same variable.

Upvotes: 0

Views: 246

Answers (2)

hansolo
hansolo

Reputation: 160

You can easily fix that by adding some booleans to your jQuery.

var isFirstClick = true;

$(document).ready(function () {
    $('.card').click(function () {
        $(this).addClass("open show");

        var firstclick, secondclick;

        if ( isFirstClick ) {
            firstclick = ($(this).children('.fa'));
            console.log(firstclick);
            isFirstClick = false;
        }
        else {
            secondclick = ($(this).children('.fa'));
            console.log(secondclick);
            isFirstClick = true;
        }

        if (firstclick === secondclick) {
            $(this).removeClass("open show");
            $(this).addClass("match")
        } else {
            let ele = $(this);
            setTimeout(function () {
                ele.removeClass("open show");
            }, 2000);
       }
    })
});

Upvotes: 0

Munkhdelger Tumenbayar
Munkhdelger Tumenbayar

Reputation: 1874

is it because everytime you click $(this) will select your clicked element so it does firstclick, secondclick get same value order to avoid this i am using seq controller for logic as you can see below

        $(document).ready(function() {
  var sequenceController = 1,
    firstclick, secondclick;
  $('.card').click(function() {
    // Card Open
    $(this).addClass("open show");

    switch (sequenceController) {
      case 1:
        firstclick = ($(this).children('.fa').attr('class'));
        sequenceController++;
        break;
      case 2:
        secondclick = ($(this).children('.fa').attr('class'));
        sequenceController--;
        if (firstclick == secondclick) {
          $('.open.show').removeClass("open show").addClass("match");
          alert('matched')
        } else {
          $('.open.show').removeClass("open show")
          firstclick = '1';
          secondclick = '2';
          alert('not matched')
        }
        break;
    }




  })

});

Upvotes: 1

Related Questions