Question

我有一个主要功能，我在点击菜单后回想起其他值。在该操作之后（单击菜单按钮），我的#card在点击时停止翻转。看起来我正在删除事件处理程序或错误的地方，但我不知道在哪里..

html很简单。卡片div：

<div id="card">

  <div class="front">
    <div class="title"></div>
    <h2>Ups</h2>
    <p>Nic tu nie ma!<br>:(</p>
  </div>

  <div class="back">
    <p>:(</p>
  </div>

</div>

菜单div：

<div class="navigation" style="display: none;">
<ul>
  <li class="first-menu navigation-item">(...)</li>

  <li class="second-menu navigation-item">(...)</li>

  <li class="list-words navigation-item">(...)</li>

  <li class="shuffle navigation-item">(...)</li>

  <li class="reverse-cards navigation-item">(...)</li>

  <li class="start-quiz navigation-item">(...)</li>

  <li class="return navigation-item"></li>
</ul>

现在，js。

有一个导航（）功能，可以显示和隐藏菜单，并允许用户返回“第一个菜单”，这意味着，返回选择主章。

没关系，我的意思是有三个菜单。其中两个会导致ajax调用并显示带有所选单词的闪存卡。我有第三个菜单的问题，（在页面的右上角）。此菜单应该让用户混合闪存卡，反转闪存卡，导航等。单击此菜单中的每个项目后会出现问题。

this picture shows items on this menu

this picture shows the #card

在点击之前，主卡翻转没有问题。但是当你混合单词或点击其他菜单项时，它会在点击时停止翻转。

好的，现在是代码：

这是让用户在#card上更改单词，混合等等的主要功能。

function main(){

(...)

$('.second-menu').click(function () { //turn back to the second menu
  $('#main-container > div:not(.title-div, .list-icon)').fadeOut(0);
  $('.navigation').fadeOut(0); //.navigation -> this is the third menu
  $('.menu2').fadeIn(0);
});

$('.list-words').click(function () { //this allows to change the view
  $('#main-container > div:not(.title-div, .list-icon)').fadeOut(0);

  $('.list-words-tiles > li').remove();
  $('.navigation').fadeOut(0);
  for (var i = 0; i < Object.keys(responceData).length; ++i) {
    $('.list-words-tiles').append('<li class="words"> <div class="front"><div>' + responceData[i].q + '</div></div><div class="back"><div>' + responceData[i].a + '</div></div></li>');
  }
  $('.list').css("display", "flex");

  $('.words').off('flip').flip({ //maby here??
    "forceHeight": true,
    "forceWidth": true
  });
  $(this).click(function () {
    $('.list').fadeOut(0);
    $('#card').fadeIn(0);
    main(responceData, reverse);
    return;
  });
}); //here the "other view" ends

$('.shuffle').click(function () { //mixing the words
  $('.navigation').fadeOut(0);
  main(shuffle(responceData), reverse);
  return;
});

$('.reverse-cards').click(function () { //reversing
  $('.navigation').fadeOut(0);
  main(responceData, !reverse);
  return;
});

}

在文档中。我有一个翻转处理程序：

$('#card').off('flip').flip({
"speed": "600",
"forceHeight": "100%"
});

如您所见，在每个“第三个菜单”项目上单击，将调用main函数以引入更改，（显示以数组中第一个元素开头的混合或反向词）。

那么为什么在这些行动之后翻转停止工作？

您可以在此处查看问题：link

调用功能后，Jquery翻转停止工作

0 个答案: