Javascript Wordpress问题中可能存在的jQuery_Javascript_Jquery_Css_Jquery Mobile

Javascript Wordpress问题中可能存在的jQuery

javascript jquery css jquery-mobile

Javascript Wordpress问题中可能存在的jQuery,javascript,jquery,css,jquery-mobile,Javascript,Jquery,Css,Jquery Mobile,我制作了这个可滑动的按钮，在WP之外效果很好，但我在Wordpress中看不到我的橙色滑动“按钮”。它没有在jQuery中拾取类。有什么想法吗？JS小提琴：似乎它没有选择这些类：“toggle_left_cl”和“toggle_right_cl”我也在head标记中延迟了我的脚本文件，并且我还尝试在函数文件中将jQuery和jQuery Mobile排队代码：免费活动独家优惠内容一内容二 jQuery（函数（）{ jQuery（“[name=toggler]”）。单击（函数（）{

我制作了这个可滑动的按钮，在WP之外效果很好，但我在Wordpress中看不到我的橙色滑动“按钮”。它没有在jQuery中拾取类。有什么想法吗？JS小提琴：似乎它没有选择这些类：“toggle_left_cl”和“toggle_right_cl”我也在head标记中延迟了我的脚本文件，并且我还尝试在函数文件中将jQuery和jQuery Mobile排队

代码：


免费活动
独家优惠
内容一
内容二
jQuery（函数（）{
jQuery（“[name=toggler]”）。单击（函数（）{
jQuery（'.toHide'）.hide（）；
var toShow=$（this）.is（“：checked”）？“blk-1”：“blk-2”；
jQuery（“#”+toShow）.toggle（1）；
});
});
$（.touchable\u swipe\u mobile”）。在（“swipeleft”，swipeleftHandler）上；
美元（“swiperight”，swiperightHandler）；
//回调函数引用事件目标并向其添加“swipeleft”类
函数swipeleftHandler（事件）{
事件。stopImmediatePropagation（）；
event.preventDefault（）；
$（'#blk-1'）.show（）；
$（'#blk-2'）.hide（）；
$（“.toggle”）.removeClass（“toggle_left_cls”）；
$（“.toggle”）.addClass（“toggle_right_cls”）；
var复选框=$（“输入[name=toggler]”）；
复选框.prop（“选中”），！复选框.prop（“选中”）；
}
//回调函数引用事件目标并向其添加“swiperight”类
函数swiperightHandler（事件）{
事件。stopImmediatePropagation（）；
event.preventDefault（）；
$（'#blk-1'）.hide（）；
$（'#blk-2'）.show（）；
$（“.toggle”）.removeClass（“toggle_right_cls”）；
$（“.toggle”）.addClass（“toggle_left_cls”）；
var复选框=$（“输入[name=toggler]”）；
复选框.prop（“选中”），！复选框.prop（“选中”）；
}
$（文档）.bind（'mobileinit'，function（）{
$.mobile.loader.prototype.options.text=“加载”；
$.mobile.loader.prototype.options.textVisible=false；
$.mobile.loader.prototype.options.theme=“a”；
$.mobile.loader.prototype.options.html=“”；
});

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