这可能不起作用的原因是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
}