使用 Javascript 滑动按钮

Question

我真的很难在我的切换按钮上添加滑动功能。我已经尝试过hammer.js、jQuery Mobile，现在我正在尝试使用常规的javascript。我真的需要一些帮助和指导。我快疯了。我的切换按钮在显示和隐藏两个 div 之间切换。我的切换按钮在这里：My Toggle Button

$("[name=toggler]").click(function () {
    $(".toHide").hide();
    var toShow = $(this).is(":checked") ? "blk-1" : "blk-2";
    $("#" + toShow).toggle(1);
});

/*Toggle*/
.toggle-label {
    position: relative;
    display: block;
    width: 300px;
    height: 40px;
    /*border: 1px solid #808080;
    */
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
    -webkit-box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
    -moz-box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
}

.toggle-label input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.toggle-label input[type="checkbox"] + .back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f4f1f0;
    /*green*/
    transition: background 150ms linear;
    border-radius: 20px;
}

.toggle-label input[type="checkbox"]:checked + .back {
    background: #f4f1f0;
    /*orange*/
}

.toggle-label input[type="checkbox"] + .back .toggle {
    display: block;
    position: absolute;
    content: " ";
    width: 50%;
    height: 100%;
    transition: margin 150ms linear;
    /* border: 1px solid #808080;
    */
    border-radius: 20px;
    margin-top: -15px;
    margin-left: 150px;
    background: #f26922;
}

/*inside toggle */
.toggle-label input[type="checkbox"]:checked + .back .toggle {
    margin-left: 2px;
    margin-top: -15px;
    background-color: #f26922;
}

.toggle-label .label {
    display: block;
    position: absolute;
    width: 50%;
    color: #9fa1a4;
    text-align: center;
    font-size: 16px;
    margin-top: -20px;
}

.toggle-label .label.on {
    left: 0px;
    font-family: "Acumin Pro ExtraCondensed", Arial, sans-serif;
}

.toggle-label .label.off {
    right: 0px;
    margin-top: -35px;
    font-family: "Acumin Pro ExtraCondensed", Arial, sans-serif;
}

.toggle-label input[type="checkbox"]:checked + .back .label.on {
    color: #fff;
}

.toggle-label input[type="checkbox"] + .back .label.off {
    color: #fff;
}

.toggle-label input[type="checkbox"]:checked + .back .label.off {
    color: #9fa1a4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="toggle-label toggler" id="toggle">
    <input id="rdb1" type="checkbox" name="toggler" checked="true" />
    <span class="back">
        <span class="toggle"></span>
        <span class="label on">Option One</span>
        <span class="label off">Option Two</span>
    </span>
</label>

<div id="blk-1" class="toHide">
    Content One
</div>

<div id="blk-2" class="toHide" style="display: none;">
    Content Two
</div>

我尝试在我的 PHP 文件中将hammer.js 加入队列，但它不起作用。我尝试了 jQuery mobile，它让我的风格略有不同......只是真的在寻找一种简单的方法来在移动设备上滑动这个按钮。值得一提的是，我还在使用 Wordpress 和自定义主题。

我也尝试过this example，但一直收到此错误：

未捕获的类型错误：

 Cannot read property 'addEventListener' of null
    at swipe (scripts.js:72)
    at scripts.js:75

当我滑动和不滑动时，我终于得到了一些东西可以“工作”控制台状态，但仍需要专注于我的按钮，有什么提示吗？

 $(function() {
   $(document).on('click touchstart', '[name=toggler]', function() {
   $('.toHide').hide();
  var toShow = $(this).is(":checked") ? "blk-1" : "blk-2";
   $("#" + toShow).toggle(1);
});
});


    
    let isSwiping = false;
    
    document.getElementById('swipe').addEventListener('mousedown', () => {
      this.isSwiping = false;
    });
    
    document.getElementById('swipe').addEventListener('mousemove', () => {
      this.isSwiping = true;
    });
    
    document.getElementById('swipe').addEventListener('mouseup', e => {
      if (this.isSwiping && e.button === 0) {
        console.log('dragging');
      } else {
        console.log('not dragging');
      }
    
      this.isSwiping = false;
    });
    
    document.getElementById('swipe').addEventListener('touchstart', () => {
      this.isSwiping = false;
    });
    
    document.getElementById('swipe').addEventListener('touchmove', () => {
      this.isSwiping = true;
    });
    
    document.getElementById('swipe').addEventListener('touchend', e => {
      e.preventDefault();
    
      if (this.isSwiping) {
        console.log('swiping');
      } else {
        console.log('not swiping');
      }
    
      this.isSwiping = false;
    });

Answer 1

不是一个确切的答案，而是一个可能对您有所帮助的 codepen 的链接。我以前用过，因为手机滑动很流畅。

https://codepen.io/pixelmediahub/pen/poRdZeW

// Swipe Forward
        $(".sp-panel-set").on("swipeleft", function(event){
        
            i+=1;
            
            if (i < 0 ){
                i = panelAmount - 1;
            }
            
            if (i >= panelAmount) {
                i = 0;
            }
        
            var pos=(i*windowWidth);
            $(".sp-panel-set").css("left", -pos + "px");
            });
    
    // Swipe Backward
            $(".sp-panel-set").on("swiperight", function(event){
            
            i-=1;
            
            if (i < 0 ){
                i = panelAmount - 1;
            }
            
            if (i >= panelAmount) {
                i = 0;
            }
            
            var pos=(i*windowWidth);
            $(".sp-panel-set").css("left", -pos + "px");
            });
    
});