2

こんにちは、なぜこれが起こっているのか完全に途方に暮れています。私はオンラインで検索し、5時間以上間違っていることを理解しようとしましたが、解決策が見つかりませんでした. これが状況です。

3 つのページ (index.html、index.js、stuff.html) があります。index.html はメイン ページであり、jQuery を使用して HTML ページを div に読み込みます。

<html>
<head>
  <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <div id="stuffHolder"></div>
  <script type="text.javascript">
    $(document).ready(function(){
      $('#stuffHolder').load('stuff.html');
    });
  </script>
</body>
</html>

stuff.html ページは問題なく読み込まれます。

stuff.html 内に 2 つの div 1 があります。DIV の 1 つはスプライトをアンカー タグとして使用して、actOnStuff(options) という名前の関数を呼び出します。 

<div id="myStuff"><a class="myStuffSprite" href="Javascript:actOnStuff('newStuff')"><span>New Stuff</span></a></div>
<div id="yourStuff"><a class="yourStuffSprite" href="Javascript:actOnStuff('oldStuff')"><span>Old Stuff</span></a></div>
  1. もう一方の DIV は空ですが、後で innerHTML が書き込まれます。

index.htmlページにあるindex.js内に、関数があります

function actOnStuff(youSelected){
  strHTML = "";
  switch(youSelected){
    case "newStuff":
      strHTML += "<div id='newDIV'><span>You selected New</span></div>";
      break;
    case "oldStuff":
      strHTML += "<div id='oldDIV'><span>You selected Old</span></div>";
      break;
  }
  $('#placement').html(strHTML);
  alert($('#placement').html());
}

私の問題は、配置 DIV の innerHTML をアラートすると、アラートに追加された関数から必要な DIV が表示されることです。ただし、配置 DIV には何も表示されません。

問題が何であるかについて完全に途方に暮れているので、あなたが提供できる助けは素晴らしいでしょう. 前もって感謝します。

4

3 に答える 3

3

実際の問題を解決できるかどうかはわかりませんが、コードにはコミュニティの利益のために指摘したい問題や悪い習慣がたくさんあります。

あなたのコードに対する私の見解は次のとおりです。

本文の HTML

<div id="stuff-holder"></div>

stuff.html の HTML

<div id="my-stuff">
    <a class="my-stuff-sprite" href="#"><span>New Stuff</span></a>
</div>
<div id="your-stuff">
    <a class="your-stuff-sprite" href="#"><span>Old Stuff</span></a>
</div>

悪い習慣: CSS と HTML ではほとんどの場合、大文字と小文字が区別されないため、ID に などのキャメルケースを使用すると、またはfooBarと混乱する可能性があります。代わりに、小文字のみを使用し、区切り記号としてダッシュを使用します (CSS のように)。foobarFoobar

index.js の JavaScript

ready関数をに移動しましindex.jsた。別の JavaScript ファイルが既にある場合に、HTML ドキュメントでそれが必要になる理由がわかりません。

// Shorthand for ready
$(function(){

    // Cache the selector
    var $placement = $("#placement");

    // Put function in the local scope so we don't clutter the global scope
    function actOnStuff(youSelected) {
        // Not declaring variables with var, makes it global (bad idea!)
        var html = "";

        switch (youSelected) {
            case "my-stuff":
                html += '<div id="new-div"><span>You selected New</span></div>';
            break;

            case "your-stuff":
                html += '<div id="old-div"><span>You selected Old</span></div>';
            break;
        }

        // Put new html in placement element
        $placement.html(html);

        // Use console.log to debug your code instead of alert
        console.log($placement.html());
    }

    // Load stuff into stuff holder and bind event handler to load event
    $("#stuff-holder")
        .load("stuff.html")
        .on("load", function() {
            // After it has loaded, bind click events
            $("#my-stuff .my-stuff-sprite, #your-stuff .your-stuff-sprite").click(function(e) {
                // Prevent default click behavior
                e.preventDefault();
                // Get id of parent
                var id = $(this).parent()[0].id;
                // Execute function
                actOnStuff(id);
            });
        });
});

悪い習慣: 内で JavaScript を実行することhrefは、今日の環境では大したことではありません。属性などを使用することでさえonclick、長い間時代遅れです。

ヒント: 関数を jQuery に直接渡すことは、$(document).ready

ヒント:オブジェクトから文字列までのすべてをログに出力するconsole.log()代わりに使用します (古い IE ではエラーが発生する可能性があります)。alert()

あなたのplacement要素がどこにあるかはまだわかりません。おそらくそれはあなたの犯人ですか？上記以外でもご不明な点がございましたら、お気軽にお尋ねください。

また、初心者からプロまで、jQuery を使用するすべての人にとって優れたリソースであるjQuery Fundamentalsも確認してください。

編集:上記のデモについては、このjsFiddleを確認してください。

于 2012-09-12T23:17:05.300 に答える
1

前

<script type="text/javascript" src="index.js"></script>

jquery最初にライブラリをロードする必要があります

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="index.js"></script>
于 2012-09-12T22:20:20.233 に答える
0

  • id="placement" を持つ要素が 1 つだけであることを確認してください。複数ある場合、IE は失敗します。

  • また、文字列を正しく出力するalert(strHTML);直前の puttedの出力は何ですか?$('#placement').html(strHTML);

于 2012-09-12T22:30:01.777 に答える