javascript - 翻转效果条件

Question

所以我想弄清楚如何使点击效果在移动设备上发挥作用。我想要台式机/笔记本电脑上的悬停效果和移动设备上的点击效果。

目前已经实现了悬停效果。正如您在我的网站主页上看到的:http://otownsend.ca/

我需要弄清楚的是如何在一定的屏幕尺寸(例如800px)下实现点击效果。因此，点击效果将要求用户单击“.flipper”以使卡片翻转，而不是当光标悬停在“.flipper”上时卡片就会翻转。这需要我放入一个条件语句——但是，它不起作用。我对 JQuery 不太熟悉，所以这是一个很大的挑战。这是我目前拥有的:

if (window.matchMedia('(max-width: 800px)').matches)
{
    $('.flipper').click(function (e) {
  $(this).toggleClass('flipped');
});
}

“.flipper”是前面和后面的父元素。所有的css和html都是一样的。我只需要集成这些 JQuery 东西就可以了。

如有任何建议，我们将不胜感激:)

Answer 1

您可以使用removeClass()和addClass() 。我还改变了你的click事件与 .on('click') 。我建议你这样使用它。另外，在 $(document).ready() 中添加代码。我希望这就是您所需要的。如果没有，请告诉我，我会尝试不同的方法:

$(document).ready(function() {
  $('.flipper').on('click', function(e) {
    $('.flipped').removeClass('flipped');
    $(this).addClass('flipped');
  });
});

关于matchMedia您可以通过运行测试片段来看到它的工作原理:

if (window.matchMedia('(max-width: 800px)').matches) {
  $('.flipper').css('color', '#f00');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='flipper'>
  testing matchMedia
</p>

此外，我在您的代码中发现您做错了什么。您正在添加 <script>包含 jQuery 的标签来源，在另一个<script>标签(或者您忘记关闭 </script> 标签)。这是错误的。请更正:

<script type="text/javascript">
    $(function(){
      $(".flipper").flip({
        trigger: "hover"
      });
    });
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

对此:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
  $(function() {
    if (window.matchMedia('(min-width: 801px)').matches) {
       $(".flipper").flip({
         trigger: "hover"
       });
    }
 });
</script>

请注意，仅为桌面添加了媒体查询，从 801 像素开始。

作为建议，我建议您使用像 Modernizr 这样的库对于媒体查询部分。使用 Modernizr 的媒体查询方式，您无需像使用 matchMedia 那样刷新页面即可看到更改。 。当您在移动设备上从纵向切换到横向时，这也很有帮助。您可以阅读有关 Modernizr 媒体查询的文档 here 。