瓷砖不右转

Question

我正在制作一个网站，http://phaidonasgialis.xyz。我想让瓷砖转动并让其他瓷砖返回。到目前为止，除了一个小错误外，它仍然有效，您按下的磁贴在您第二次单击之前不会返回。任何帮助将不胜感激。

代码如下：

$(document).ready(function() {

var 先前 = []; $('.flip-card').each(function(i, obj) {

$(this).click(function() {
  if ($(this).find('.flip-card-inner').hasClass('flip-card-transform')) {
    $(this).find('.flip-card-inner').removeClass('flip-card-transform');

  } else {
    $(this).find('.flip-card-inner').addClass('flip-card-transform');
    previous.push(this);


    if (previous.length >= 2 && previous[previous.length - 2] != previous[previous.length - 1]) {

      for (var i = 0; i < previous.length; i++) {
        if ($(this).find('.flip-card-inner').hasClass('flip-card-transform')) {
          $(previous[i - 1]).find('.flip-card-inner').removeClass('flip-card-transform');
          console.log("2")

        } else {
          $(this).find('.flip-card-inner').addClass('flip-card-transform');

          console.log("3")
        }

      }

    }

  }
});

});

Answer 1

如果我正确理解您的问题，您是否希望卡片在一段时间后自动翻转？如果是这样，那么您只需设置一个 Timeout 并从 .flip-card-inner 中删除类 flip-card-transform。

旁注：你绝对应该通过使用变量而不是 $(this).find('.flip-card-inner') 来优化你的代码——将 this 转换为 jQuery 对象并搜索其子元素您需要flip-card-inner 的时间。您也可以直接使用$('.flip-card').click(...)，而不是$('.flip-card').each(...)。并且正如 Harun Yilmaz 在他的评论中所建议的那样，您不需要之前的数组......

所以这样的事情应该可以工作：

$(document).ready(function () {
  var previous
  var timeout
  $('.flip-card').click(function () {
    var cardInner = $(this).find('.flip-card-inner')
    if (cardInner.hasClass('flip-card-transform')) {
      cardInner.removeClass('flip-card-transform')
      clearTimeout(timeout)
    } else {
      cardInner.addClass('flip-card-transform')

      // Set a Timeout
      timeout = setTimeout(function () {
        cardInner.removeClass('flip-card-transform')
      }, 2000) // set whatever time sutable for you

      // Also as Harun Yilmaz suggested in his comment you don't need previous as an array
      if (previous && previous.hasClass('flip-card-transform')) {
        previous.removeClass('flip-card-transform')
      }
      previous = cardInner
    }
  })
})