翻转效果条件

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()。我还用.on('click') 更改了您的click 事件。我建议您以这种方式使用它。另外，在$(document).ready() 中添加代码。我希望这是你需要的。如果没有，请告诉我，我会尝试不同的方法：

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

关于matchMedia你可以通过运行测试sn-p看到它的工作原理：

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>

另外，我在您的代码中看到，您做错了什么。您正在添加一个包含jQuery 源的<script> 标记，在另一个<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。