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

Question

所以我有一个带有单选按钮的 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，但它根本不起作用。任何人都知道如何解决它？

Answer 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);
});
});