Question

更新

我确实让这个工作了，这是新的javascript： $（document）.ready（function（）{

$('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的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在#home中包含一个段落“home”。试图保持简单和无聊。

以下是涉及的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。 / p>

有人可以指出我的错误吗？

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>

使用jquery动态加载内容模块

2 个答案: