使用 Javascript 滑动按钮

Question

I really am struggling to put a swipe functionality on my toggle button. I have tried hammer.js, jQuery Mobile and now I am trying to use regular javascript. I really need some help and guidance on this.. I am going crazy. My toggle button toggles between showing and hiding two divs. My toggle button is here: 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>

I tried enqueuing hammer.js in my PHP file but it just wasn't working. I tried jQuery mobile and it made my styles slightly off... Just really looking for a simple way to just swipe this button on mobile. For what it's worth I am also using Wordpress and a custom theme.

I have also triedthis example but keep getting this error:

Uncaught TypeError:

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

I finally got something to "work" the console states when I am swiping and not swiping, but still need to focus in on my button, any tips?

 $(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

Not an exact answer, but a link to a codepen which may help you. I have used in the past, as the mobile swipe is very smooth.

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