Jquery - 使用触摸滑动检查单选按钮答案

【问题标题】：Jquery - Using Touch Swipe to Check Radio ButtonsJquery - 使用触摸滑动检查单选按钮
【发布时间】：2013-09-01 05:43:33
【问题描述】：

所以我有一个带有单选按钮的 CSS3 幻灯片设置来触发下一张幻灯片。我希望能够为平板电脑和手机添加触摸/滑动（即向左滑动，然后检查下一个收音机）。

我正在尝试使用的 jQuery：

$(document).ready(function() {
    $("#cover").swipeleft(function(event){
            $('input:radio[class=slide_2]').attr("checked", true);
    });
    $("#cover2").swiperight(function(event){
        $('input:radio[class=slide_1]').attr("checked", true);
    });
    $("#cover2").swipeleft(function(event){
        $('input:radio[class=slide_3]').attr("checked", true);
    });
    $("#ingredients").swiperight(function(event){
        $('input:radio[class=slide_2]').attr("checked", true);
    });
    $("#ingredients").swipeleft(function(event){
        $('input:radio[class=slide_4]').attr("checked", true);
    });
    $("#directions").swiperight(function(event){
        $('input:radio[class=slide_3]').attr("checked", true);
    });
});

http://jsfiddle.net/hakarune/ZsrdP/1/ 这是整个设置和我的 jQuery，但它根本不起作用。有人知道如何解决吗？

【问题讨论】：

新的更新，G+ 上的 Blaise Rienzo 能够制作出有效的 fiddle。他包括了 jQueryMobile，在 CSS 中添加了 section{height: 100%}，将 .attr 更改为 .prop... 我对其进行了更改，因此滑动从幻灯片 div 上移开，它在小提琴中起作用。但是一旦我将它设置为实际页面，它就不再起作用了DEMO 有什么问题吗？
有错误返回，因为它不是 https 服务，在站点上尝试了 https 和本地，添加jquery.mobile-1.3.2.min.js 似乎导致页面变为空白，但不会产生错误....
当我通过 https 主机将其更改为 jquery.mobile-1.2.0.min.js 时，它就与 jquery.mobile-1.3.2.min.js 有关。

标签： javascript jquery html swipe touchscreen

【解决方案1】：

您可以使用像 hammer.js 这样的库你的代码会是这样的：

$(document).ready(function() {
$("#cover").hammer().on(swipeleft, function(event){
        $('input:radio[class=slide_2]').attr("checked", true);
});
$("#cover2").hammer().on(swiperight, function(event){
    $('input:radio[class=slide_1]').attr("checked", true);
});
$("#cover2").hammer().on(swipeleft, function(event){
    $('input:radio[class=slide_3]').attr("checked", true);
});
$("#ingredients").hammer().on(swiperight, function(event){
    $('input:radio[class=slide_2]').attr("checked", true);
});
$("#ingredients").hammer().on(swipeleft, function(event){
    $('input:radio[class=slide_4]').attr("checked", true);
});
$("#directions").hammer().on(swiperight, function(event){
    $('input:radio[class=slide_3]').attr("checked", true);
});
});

【讨论】：

刚刚测试了它here，它不起作用....有什么想法吗？
确保你在标签中调用了 jquery 锤子库，并且你可以只使用类选择器调用你的输入，因为每个选择器都有不同的类，并从括号中删除 true，如下所示：$(' .slide_2').attr("checked");