Question

我正在尝试使用Matt Bryson的Jquery touchSwipe插件（https://github.com/mattbryson/TouchSwipe-Jquery-Plugin）来推进一组单选按钮以显示/隐藏页面上的内容。

我真的只需要转到左侧滑动的下一个单选按钮和右侧滑动的上一个单选按钮，并尝试尽可能地进行概括，以便它可以与同一页面上的许多按钮组一起使用。

理想情况下，我想将它附加到按钮组的名称，而不是与显示的事物相关联的特定ID或类，但我似乎无法使其正常工作。如果有人对如何实现这一点有任何想法，我真的很感激！

我的代码如下。注释掉的“你刷过......”这一行是演示中的原始事件，并确实有效......

$(function() {      
  //Enable swiping...
  $("#log1").swipe( {
    //LEFT SWIPE
    swipeLeft:function(event, direction, distance, duration, fingerCount, fingerData) {
      //$(this).text("You swiped " + direction );  
      $("input:radio[name=log1-slab-selector]").next(":checked")

    },
    //RIGHT SWIPE
    swipeRight:function(event, direction, distance, duration, fingerCount, fingerData) {
      //$(this).text("You swiped " + direction );  
      $("input:radio[name=log1-slab-selector]").prev(":checked")
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:0
  });
});

Answer 1

我发现这篇相关的文章（Select next/prev radio button with external button）帮助我走上正轨，并鼓励我将我的按钮包裹在ul＆amp; li中。

不幸的是它仍然没有用，但我发现只有一个非语义DIV妨碍了树中正确的li。 DAR！一旦所有内容都移到li内，它就会很棒！

此代码为我解决了这个问题：

$(function() {
    //Enable swiping...
    $("div#log1").swipe( {

        //LEFT SWIPE
        swipeLeft:function(event, direction, distance, duration, fingerCount, fingerData) {
            $(this).find('li:has(input:checked)').next('li').children('input').prop("checked", true);
        },

        //RIGHT SWIPE
        swipeRight:function(event, direction, distance, duration, fingerCount, fingerData) {
            $(this).find('li:has(input:checked)').prev('li').children('input').prop("checked", true);
        },

        //Default is 75px, set to 0 for demo so any distance triggers swipe
        threshold:25
    });
});

尝试使用滑动使用Jquery循环显示一组单选按钮

1 个答案: