翻转效果条件

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您可以通过运行测试看到片断，它的工作原理：

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>

通知媒体查询，从801px了。

作为一个建议，我想建议您使用一个库，如Modernizr为媒体查询部分。使用Modernizr使用媒体查询的方式，您不必刷新页面即可查看使用matchMedia时的更改。这也有助于在移动设备上从纵向切换到横向。您可以阅读有关Modernizr媒体查询的文档here。