3

我对 Javascript 编码没有经验。不过，我愿意学习。

我遇到了一些创建折叠/展开<div>块的教程。我已经用 jsfiddle 测试了代码。你可以在这里查看代码

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

起初，我在 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 代码与小提琴HTML 面板上的相同，它显示在 WordPress 页面中。

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

Chrome 控制台为我提供以下信息：

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

最大的问题是为什么代码在 jsfiddle 上运行良好，无论是在 mootools 还是 jquery 框架上，但它在实时站点上不起作用？

更新：我已经更新了脚本标签。还是不行。

4

2 回答 2

2

您需要将您的 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 的引用。

于 2012-12-17T14:44:31.633 回答
1

你有一些问题：

  • 重叠的脚本标签
  • 您在 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>
于 2012-12-17T14:49:13.543 回答