Question

这是代码的精简版本，真正的版本太长而无法发布，但这足以代表这个概念。我正在使用它来根据锚点表示的几个选项来切换吉他图表，并在href =“”中使用相应的id。在花了几天时间让它在静态html页面上正常工作后，该脚本将无法在我打算使用它的Wordpress页面中运行。我已经尝试了头部或内联的脚本（这应该没关系） - 但无论哪种方式它都不起作用。我知道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>

Answer 1

我的猜测是你的Wordpress安装或插件已经加载了jQuery。检查它是否存在，如果存在，请不要再次调用它。

如果没有这个并且你有这个网站在线，请给我链接，我会看看。

两次调用jQuery通常会导致问题。如果您特别需要1.8.3（wp_register_script和wp_enqueue_script），还有一种加载jQuery并覆盖Wordpress版本的正确方法，但我认为您还不需要沿着该路线前进。

Answer 2

Wordpress默认使用jQuery.noConflict()。这是为了确保使用$变量的其他库不存在冲突。这就是为什么你的控制台说这不是一个功能。

但是，显然，jQuery变量仍然有效，您应该使用它，并自己将$变量传递给您的函数以启用jQuery的简写版本。

所以你的代码应该是这样的：

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

     // Your functions go here

});

我的div显示/隐藏代码在静态HTML页面上工作正常，但在Wordpress 3.5.1页面上不起作用

2 个答案: