Код jQuery не работает на странице виджетов

Я пытаюсь добавить этот код в одну из форм виджетов, но это не сработает.

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

Код должен отображать / скрывать div с идентификаторами (ad1, ad2, ad3) на основе текущего выбора опций, но он не выполняет работу на странице виджетов. Похоже, что что-то не так с вызовом jQuery на странице виджетов.

Причина, по которой это, вероятно, не работает, заключается в том, что WordPress использует noConflict() . Из Кодекса:

Библиотека jQuery, включенная в WordPress, установлена ​​в режим noConflict() (см. wp-includes/js/jquery/jquery.js ). Это необходимо для предотвращения проблем совместимости с другими библиотеками JavaScript, которые WordPress может связывать.

В режиме noConflict() глобальный $ shortcut для 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 использовать псевдоним $ чтобы вы могли продолжать писать 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 }