加载内容模块动态与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>