Question

我对Javascript编码没有经验。但是，我愿意学习。

我遇到了一些用于创建崩溃/展开<div>块的教程。我用jsfiddle测试了代码。您可以查看代码here

它工作正常，无视造型。但是，我无法弄清楚为什么代码在实时网站上不起作用。

首先，我在WordPress页面编辑器中插入了所有代码javascript和HTML。然后，我在标题中移动了javascript。我看到了有关代码来源的一些信息。我不确定是哪个来源。

以下是header.php中插入的javascript代码：

<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js">
function toggle2(showHideDiv, switchTextDiv) {
    var ele = document.getElementById(showHideDiv);
    var text = document.getElementById(switchTextDiv);
    if (ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "expand";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "collapse";
    }
}

function toggle3(contentDiv, controlDiv) {
    if (contentDiv.constructor == Array) {
        for (i = 0; i < contentDiv.length; i++) {
            toggle2(contentDiv[i], controlDiv[i]);
        }
    }
    else {
        toggle2(contentDiv, controlDiv);
    }
}
</script>

HTML代码与fiddle HTML面板上的相同，我在WordPress页面中显示。

请告诉我这段代码有什么问题？它是javascript代码的来源吗？

Chrome控制台为我提供了以下内容：

未捕获的ReferenceError：toggle2未定义example.com:103 的onclick

最大的问题是为什么代码在mosools或jquery框架上的jsfiddle工作正常，而且它在现场网站上不起作用？

更新：我更新了脚本标签。仍然无效。

Answer 1

您需要将您的Javascript代码放在自己的代码中。

  <script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js">
  <script type="text/javascript">

       YOUR CODE HERE

  </script>

此外，由于您使用的是jQuery，因此您需要使用ready（）函数，如下所示：

       $(function(){
             YOUR CODE HERE
       });

  <a href="#" id="clickme">Click</a>  
  <div id="d1">Some content to hide</div>

头脑中：

  <script type="text/javascript">
       $(document).ready(function(){
           $("#clickme").toggle(function(){
               $("#d1").show();
           },
             function(){
                $("#d1").hide();
             }
           );
       });
  </script>

当然，在代码中保留对jQuery的引用。

Answer 2

你有一些问题：

重叠的脚本标记
您在Jsfiddle中使用Mootools，在此示例中使用jQuery
你包括jquery，但是然后用普通的Javascript

试试这个，更正脚本标签：

<script type="text/javascript" language="javascript" src="http://example.com/wp-content/themes/crimson/scripts/jquery.min.js"></script>
<script type="text/javascript">
function toggle2(showHideDiv, switchTextDiv) {
    var ele = document.getElementById(showHideDiv);
    var text = document.getElementById(switchTextDiv);
    if (ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "expand";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "collapse";
    }
}

function toggle3(contentDiv, controlDiv) {
    if (contentDiv.constructor == Array) {
        for (i = 0; i < contentDiv.length; i++) {
            toggle2(contentDiv[i], controlDiv[i]);
        }
    }
    else {
        toggle2(contentDiv, controlDiv);
    }
}
</script>

折叠/展开脚本无效

2 个答案: