0

我制作了这个可滑动的按钮，在 WP 之外工作得很好，但我在 Wordpress 中看不到我的橙色滑动“按钮”。它没有拿起 jQuery 中的类。有任何想法吗？JS Fiddle：JS Fiddle 似乎它没有选择这些类：“toggle_left_cl”和“toggle_right_cl”我也将我的脚本文件推迟到我的头标签中，我还尝试在函数文件中加入 jQuery 和 jQuery Mobile

代码：

   <body id="outsideclick">
    <label class="toggle-label toggler touchable_swipe_mobile" id="toggle">
        <input id="rdb1" type="checkbox" name="toggler" checked="true"/>
        <span class='back'>
            <span class='toggle'></span>
            <span class='label on'>Complimentary Activities</span>  
            <span class='label off'>Exclusive Offers</span>
        </span>
    </label>

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

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


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"> 
 </script>

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

    $( ".touchable_swipe_mobile" ).on( "swipeleft", swipeleftHandler );
    $( ".touchable_swipe_mobile" ).on( "swiperight", swiperightHandler );
 
  // Callback function references the event target and adds the 'swipeleft' class to it
  function swipeleftHandler( event ){
  event.stopImmediatePropagation();
    event.preventDefault();
    $('#blk-1').show();
    $('#blk-2').hide();
    $(".toggle").removeClass("toggle_left_cls");
    $(".toggle").addClass("toggle_right_cls");
    var checkBoxes = $("input[name=toggler]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
  }
  
  // Callback function references the event target and adds the 'swiperight' class to it
  function swiperightHandler( event ){
    event.stopImmediatePropagation();
    event.preventDefault();
    $('#blk-1').hide();
    $('#blk-2').show();
    $(".toggle").removeClass("toggle_right_cls");
    $(".toggle").addClass("toggle_left_cls");
    var checkBoxes = $("input[name=toggler]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
  }
  

$( document ).bind( 'mobileinit', function(){
    $.mobile.loader.prototype.options.text = "loading";
    $.mobile.loader.prototype.options.textVisible = false;
    $.mobile.loader.prototype.options.theme = "a";
    $.mobile.loader.prototype.options.html = "";
});

</script>
4

0 回答 0