Javascript 我的div show/hide代码在静态HTML页面上运行良好，但不'；不要在Wordpress 3.5.1页面上工作

这是代码的浓缩版本，真实版本太长，无法发布，但这足以表示概念。我正在使用它根据href=”“中相应id的锚所代表的几个选项切换吉他图。在花了几天时间让它在一个静态html页面上正常工作之后，这个脚本在我打算使用它的Wordpress页面上就不起作用了。我已经尝试过在head或inline中使用脚本（这应该没关系），但无论哪种方式，它都无法正常工作。我知道Wordpress和某些插件使用Jquery，因此可能存在版本不匹配导致冲突。我还不是javascript方面的专家，但我知道有几种方法可以剥猫皮。俗话说，我只需要找到一种能很好地使用Wordpress的方法。任何帮助都将不胜感激

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

    var divswitch = $('div.diagram_container a');

    divswitch.bind('click',function(event){
        var $anchor = $(this);
        var ids = divswitch.each(function(){
           $($(this).attr('href')).hide();   
        });
        $($anchor.attr('href')).show();
        event.preventDefault();
    });


});
</script>

<style>
.diagram {
    margin: 0;
    width: 100%;
}
.diagram_container {
    width: 100%;
}
</style>

    <div id="RH_RW_Div" class="diagram_container" style="float:left; display:block;">
        <div class="diagram_menu">
          <a class="checked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a> 
          <a class="unchecked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
        </div>
        <img class="diagram" src='images/RH_RW.gif' /><br />
    </div>

    <div id="LH_RW_Div" class="diagram_container" style="float:left; display:none;">
        <div class="diagram_menu">
          <a class="unchecked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a> 
          <a class="checked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
        </div>
        <img class="diagram" src='images/LH_RW.gif' /><br />
    </div>  

$（文档）.ready（函数（）{
var divswitch=$（'div.diagram_container a'）；
divswitch.bind（'click'，函数（事件）{
var$anchor=$（此）；
var id=divswitch.each（函数（）{
$（$（this.attr（'href'））.hide（）；
});
$（$anchor.attr（'href'））.show（）；
event.preventDefault（）；
});
});
.图表{
保证金：0；
宽度：100%；
}
.集装箱图{
宽度：100%；
}

我猜您的Wordpress安装或插件已经在头部加载了jQuery。检查它是否存在，如果存在，不要再打电话给它

如果这还不行，你有这个网站在线，给我发链接，我会看看

两次调用jQuery通常会导致问题。如果您特别需要1.8.3（和），还有一种加载jQuery和覆盖Wordpress版本的正确方法，但我认为您还不需要走这条路。

Wordpress默认使用。这是为了确保使用

$

变量的其他库不会发生冲突。这就是为什么你的控制台说它不是一个函数

但是，显然，

jQuery

变量仍然有效，您应该使用它，并自己将

$

变量传递给函数，以启用

jQuery

的速记版本

因此，您的代码应该如下所示：

jQuery(document).ready(function($){

     // Your functions go here

});

---

控制台

说什么？SyntaxError:SyntaxError[Break On This error]$（document）.ready（function（）{

Wordpress正在添加标记，以消除脚本中的空格，看看这是否有帮助……啊！您已经在帖子内容中发布了脚本？如果您在编辑器的HTML版本中发布它，您应该不会有任何问题。但是，顺便提一下，您不应该在帖子编辑器中发布JS。使用以下语法：

jQuery（document）.ready（function（$）{}；

，

$

尚未定义。@Sunyatasattva上面的评论就是票证（由于我的声誉，我不能直接在那里发表评论）-必须将脚本放入wysiwyg编辑器中。不，我只使用HTML视图，所以这不可能。脚本现在回到了头部，仍在中断。控制台说TypeError:$不是一个函数[Break On This Error]$（document）.ready（function（）{我明白了。那么jQuery是否在头部被调用了两次？@Sunyatasattva-再次感谢您的帮助：）没问题，这里是帮助：）当我觉得吉他网站看起来更受人尊敬时，我会用上面的代码发布它的URL。如果你愿意，请查看我正在使用这个网站来进一步测试我一直在使用的一些社交网络风格的代码。视频和讨论相当有知识性/哲理性。我希望有另一位知识份子加入。cheers！。。。