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

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

1 个答案: