Question

我正在建立一个网站，http://phaidonasgialis.xyz。我想让瓷砖转动，然后让所有其他瓷砖回头。到目前为止，除一个小错误外，它一直有效，您按下的磁贴只有在您第二次单击后才会返回。任何帮助都将是感激的。

代码如下：

$（document）.ready（function（）{

var previous = []; $（'。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-transform中删除类.flip-card-inner。

旁注：您绝对应该使用变量而不是进行$(this).find('.flip-card-inner') –将this转换为jQuery来优化代码每次需要flip-card-inner时，都会对其对象进行搜索并搜索其子级。另外，您可以直接使用$('.flip-card').each(...)代替$('.flip-card').click(...)。而且正如 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
    }
  })
})

瓷砖不向右转

1 个答案: