尝试使用滑动在一组带有 Jquery 的单选按钮中循环答案

【问题标题】：Trying to cycle through a group of radio buttons with Jquery using swipe尝试使用滑动在一组带有 Jquery 的单选按钮中循环
【发布时间】：2014-08-12 10:40:44
【问题描述】：

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

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

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

我的代码如下。注释掉的“you swipe...”行是演示中的原始事件，并且确实有效...

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

【问题讨论】：

标签： javascript jquery button radio next

【解决方案1】：

我发现这篇相关文章 (Select next/prev radio button with external button) 帮助我走上了正轨，并鼓励我将按钮包装在 ul&li 中。

不幸的是，它仍然无法正常工作，但我发现只有一个非语义 DIV 妨碍了在树中定位正确的 li。达尔！将所有内容移到 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
    });
});

【讨论】：