コンテンツの読み込みモジュールを動的にjQueryを使って

Question

更新：

私は、ここに新しいjavascriptのである。この作業を取得しました： $（ドキュメント）.ready（関数（）{

$('a').click(function(e) { 
    $v = $(this).attr("class"); 
    $targetID = ' #' + $v; 
    $path = $(this).attr('href') + $targetID; 
     $('#' + $v).load($path); 
    e.preventDefault();  
}); 

何が起こりました＃class-nameの＃class-nameを検索するように設定していました。

オリジナル投稿：

jQueryでajaxをうまく活用する方法を自分自身で教えようとしているので、コンテンツを動的に更新するためにポートフォリオを更新しています。このテストでは、プロセスを簡素化しますが、この場合のために、私は3つのHTMLページを持っている：

home.php 
    about.php 
    contact.php 

同じマークアップが、唯一、それぞれのdiv含むコンテンツで：

<div id="links"> 
     <a href="../ajax/home.php" class="home">Home</a> 
     <a href="../ajax/about.php" class="about">about</a> 
     <a href="../ajax/contact.php" class="contact">contact</a> 
    </div> 

    <div id="content"> 
     <div id="home"> 
      <p>Home</p> 
     </div> 
     <div id="about"> 
     </div> 
     <div id="contact"> 
     </div> 
    </div> 

のでhome.phpは段落が含まれています家には＃ホームがあります。シンプルで退屈なままにしようとしています。ここで

は関与ジャバスクリプトです：

$(document).ready(function() { 
     $('a').click(function(e) { 
      $v = $(this).attr("class"); //pulls the name of the associated link 
      $targetID = ' #' + $v; 
      $path = $(this).attr('href') + $targetID; //generates the path that ajax is loading: "../folder/FILE-NAME/.php #DIV-NAME" 
      if ($('#', $v).text() == '') { //Checks whether content exists in that div already  
       $('#', $v).load($path + ' ' + $targetID); //Is SUPPOSED to pull content from the div on one page into its corresponding div on the current page - This is where the script is breaking 
      } 
      else { 
       alert($v + " isn't empty!"); 
      } 
      e.preventDefault(); //prevents normal link behavior 
     }); 
    }); 

スクリプトが破壊された部分はもちろん、私はちょうど使用することを学んでいる部分である - AJAX要求を別の上の1つのDIVからコンテンツをロードしますページを開き、現在のページの適切なdivに配置します。

誰かが私の間違いを指摘できますか？あなたは、コンテンツのdivが間違って選択されている

Answer 1

：

$(document).ready(function() { 
    $('a').click(function(e) { 
     $v = $(this).attr("class"); //pulls the name of the associated link 
     $targetID = ' #' + $v; 
     $path = $(this).attr('href') + $targetID; //generates the path that ajax is loading: "../folder/FILE-NAME/.php #DIV-NAME" 
     if ($('#' + $v).text() == '') { //Checks whether content exists in that div already  
      $('#' + $v).load($path + ' ' + $targetID); //Is SUPPOSED to pull content from the div on one page into its corresponding div on the current page - This is where the script is breaking 
     } 
     else { 
      alert($v + " isn't empty!"); 
     } 
     e.preventDefault(); //prevents normal link behavior 
    }); 
}); 

Answer 2

これはあなたのアイデアを与える必要があります。

$(document).ready(function() { 

     $('a').click(function(e) { 
      $v = $(this).attr("class"); //pulls the name of the associated link 
      $targetID = ' #' + $v; 
      $path = $(this).attr('href') + $targetID; //generates the path that ajax is loading: "../folder/FILE-NAME/.php #DIV-NAME" 
      if ($($targetID).text() == '') { //Checks whether content exists in that div already  
       //var content = $($targetID).load($path + ' ' + $targetID); //Is SUPPOSED to pull content from the div on one page into its corresponding div on the current page - This is where the script is breaking 
       //alert(content); 
       $.post($path, function(data) { 
        $($targetID).html(data); 
       }); 
      } else { 
       alert($v + " isn't empty!"); 
      } 
      e.preventDefault(); //prevents normal link behavior 
     }); 
    }); 

HTML：

<div id="links"> 
     <a href="../ajax/home.php" class="home">Home</a> 
     <a href="../ajax/about.php" class="about">about</a> 
     <a href="../ajax/contact.php" class="contact">contact</a> 
    </div> 

    <div id="content"> 
    <div id="home"> 
     <p>Home</p></div> 
     <div id="about"></div> 
     <div id="contact"></div> 
    </div>