JQuery代码在小部件页面中不起作用

时间:2015-01-28 作者:Ahmed Saad

我试图将此代码添加到我的一个小部件表单中,但它不起作用。

<script type="text/javascript">
$(document).ready(function() {
     $(\'#select\').change(function() {
         $("#" + this.value).show().siblings().hide();
     });
     $("#select").change();
 });
</script>

<select class="widefat" id="select">
    <option value="ad1">ad1</option>
    <option value="ad2">ad2</option>
    <option value="ad3">ad3</option>
</select>

<div>
<div id="ad1">ad1</div>
<div id="ad2">ad2</div>
<div id="ad3">ad3</div>
</div>
代码应该根据当前的选项选择显示/隐藏ID为(ad1、ad2、ad3)的div,但它不能在widgets页面上完成这项工作。在widgets页面中调用jQuery似乎有问题。

1 个回复
最合适的回答,由SO网友:Howdy_McGee 整理而成

这可能不起作用的原因是Wordpress使用noConflict() 模式From The Codex:

WordPress附带的jQuery库设置为noConflict() 模式(请参阅wp-includes/js/jquery/jquery.js ). 这是为了防止与WordPress可以链接的其他JavaScript库的兼容性问题。

noConflict() 模式,全局$ 的快捷方式jQuery 不可用

您需要这样做:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(\'#select\').change(function() {
             $("#" + this.value).show().siblings().hide();
        });
        $("#select").change();
    });
</script>
该行:jQuery(document).ready(function($) { 告诉JQuery使用$ alias,这样您就可以像往常一样继续编写JQuery了。

JQuery不是我的强项。但我还是能让它工作,试试这个:

function form() {
    ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $(\'select#select\').change( function() {
                    $( \'#hide_show div\' ).css(\'display\', \'none\');
                    $( \'#hide_show #\' + this.value ).css(\'display\', \'block\');
                });
            });
        </script>

        <style type="text/css">
            #hide_show div  {display: none;}
        </style>
         
        <select class="widefat" id="select">
            <option value="ad1">ad1</option>
            <option value="ad2">ad2</option>
            <option value="ad3">ad3</option>
        </select>
         
        <div id="hide_show">
            <div id="ad1">ad1</div>
            <div id="ad2">ad2</div>
            <div id="ad3">ad3</div>
        </div>
    <?php
}

结束

相关推荐

如何在WordPress站点上使用这个jQuery脚本?

我一直在努力在wordpress网站上设置jquery列表文件。这是代码笔中的脚本和html:http://codepen.io/javve/pen/bBfgD我的问题是。示例中有html,其中链接了脚本。我是否可以将html复制到自定义页面,或者是否需要在页眉/页脚中设置它们,或者为它们赋形?第二个问题是关于jquery的:var monkeyList = new List(\'test-list\', { valueNames: [\'name\'], page: 5, plu