Question

您可以使用下面的github页面链接访问完整代码。 Link

HTML代码中的代码如下。

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

JavaScript代码就是这样。

$(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);
        }
    })
});

您可以看到我的评论。单击li元素时，请检查li元素内部的i标记并将其保存到firstclick变量中。和secondclick也一样。并相互比较，如果匹配，则将类别更改为“卡片匹配”，但如果不匹配，则在2秒后应更改“卡片”类别以关闭该卡片。

但是我有一个疑问，我该如何保存firstclick和secondclick 在我的console.log中，当我单击li元素时，它只保存了相同的变量。

Answer 1

是因为每次您单击$（this）都会选择您单击的元素，因此它会进行firstclick，secondclick获得相同的值顺序，以避免出现这种情况，我正在将seq控制器用于逻辑，您可以参见下文

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




  })

});

Answer 2

您可以通过在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);
       }
    })
});

jQuery多点击事件检查

2 个答案: