加載內容模塊動態與jquery

Question

更新：

我沒有得到這方面的工作，這裏是新的JavaScript： $（文件）。就緒（函數（）{

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

發生了什麼事是我沒有意識到$ path已經考慮到了我正在搜索的內容，＃CLASS-NAME。我已經設置好了＃class-name裏面的＃class-name。謝謝你的幫助！

原文章：

我想教自己如何更好地利用jQuery與jQuery的優勢，所以我正在更新我的投資組合以動態更新內容。這個測試簡化了過程，但這種情況下，我有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包含一個段落＃家裏說'家'。試圖保持簡單和無聊。

這裏涉及的JavaScript：

$(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請求的內容從一個DIV裝載在不同的頁面並將其放入當前頁面的右側div。

有人能指出我的錯誤嗎？

Answer 1

您選擇您的內容div的錯誤：

$(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>