3

私は Javascript コーディングの経験がありません。しかし、私は喜んで学びます。

折りたたみ/展開<div>ブロックを作成するためのチュートリアルをいくつか見つけました。私はjsfiddleでコードをテストしました。ここでコードを確認できます

スタイリングを無視して、正常に動作します。ただし、ライブ Web サイトでコードが機能しない理由がわかりません。

最初に、すべてのコード javascript と HTML を WordPress ページエディターに挿入しました。次に、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 コンソールから次の情報が得られます。

Uncaught ReferenceError: toggle2 が定義されていません example.com:103 onclick

大きな問題は、mootools または jquery フレームワークのいずれかの jsfiddle でコードが正常に動作し、実際のサイトでは動作しないのはなぜですか?

更新: スクリプト タグを更新しました。それでもうまくいきません。

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 に答える