Question

我正在尝试将jQuery iToggle Plugin用于我的一个项目。但它似乎没有正常工作。让我们先看看代码，然后解释问题。

HTML <head>部分::

<link rel="stylesheet" href="http://localhost/projects/mythadmin/wp-admin/load-styles.php?c=1&amp;dir=ltr&amp;load=admin-bar,wp-admin&amp;ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="thickbox-css" href="http://localhost/projects/mythadmin/wp-includes/js/thickbox/thickbox.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="myth_admin_stylesheet-css" href="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/css/mythadmin.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="myth_itoggle_stylesheet-css" href="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/css/engage.itoggle.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="myth_admin_colorpicker_stylesheet-css" href="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/colorpicker/css/colorpicker.css?ver=3.4.2" type="text/css" media="all">
<link rel="stylesheet" id="colors-css" href="http://localhost/projects/mythadmin/wp-admin/css/colors-fresh.css?ver=3.4.2" type="text/css" media="all">
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils&amp;ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/js/jquery.easing.js?ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/colorpicker/js/colorpicker.js?ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/js/engage.itoggle.js?ver=3.4.2"></script>
<script type="text/javascript" src="http://localhost/projects/mythadmin/wp-content/themes/mythadmin/mythadmin/js/mythadmin.js?ver=3.4.2"></script>

此处正在正确加载所有文件而没有任何404s。

HTML正文::

<div class="myth_option_container toggle">
    <label for="test_cb">Test Checkbox</label>
    <input type="checkbox" id="test_cb" name="test_cb">
</div>

调用iToggle功能

$(document).ready(function(){
   // Initialize iToggle Checkboxes
   $('input#test_cb').iToggle({
        easing: 'easeOutExpo',
        speed: 300
    });
});

上述代码是从mythadmin.js部分的head文件中调用的。{/ p>

这似乎根本不起作用，我在控制台中没有错误，所有文件都正确加载但我无法看到切换按钮。

虽然如果我定位input's parent container，我可以看到切换框并打开和关闭但没有easing效果（出于某种原因）。

所以说如果我将$('input#test_cb')更改为$('div.toggle')就行了（根本没有缓和效果）。

问题：

当我将其直接绑定到复选框输入时，为什么这不起作用。
为什么即使正确加载easing.js，缓动效果也不起作用。

提前感谢您的时间和帮助！

Answer 1

这里遇到同样的问题。尝试使用旧版本的jQuery（1.4.2分钟）并且它工作正常......虽然看起来不适合1.8.2 ......

已编辑：iToogle＆lt;这个版本的iToggle应该适用于更新版本的jQuery。

用于jQuery的iToggle：不正常工作

1 个答案: