Question

我正在使用AJAX加载动态页面加载...像这样...

$(document).ready(function(){
  $("#xxxxx").click(function(){    
      document.getElementById("contentAll").innerHTML = "";    
  $.ajax({
      url: "base_template.html",
      cache: false,
      success: function(html){
      $("#contentAll").append(html);
    }
  });
});

我的问题是这只会加载一个导航部分（#id）。我在页面上有两个（顶部有一个是下拉式的，一个是左边的，当你在那个特定的页面上时会被加载。

如何设置加载两个ID，我感到困惑......

WDH

Answer 1

你没有。 ID应仅存在一次。如果页面上有多个项目，则应将这些ID更改为类。

然后只使用jQuery中的类。

$(document).ready(function(){

  $.ajax({
      url: "base_template.html",
      cache: false,
      success: function(html){
      $(".navigation").append(html);
    }
  });
});

Answer 2

不允许您在同一页面上使用相同值的ID。您可以切换到使用类名而不是ID，并让jQuery对具有该类名的两个对象进行操作。

而不是<div id="contentAll"></div>，您将拥有<div class="contentFinal"></div>，然后您将使用此jQuery：

$(document).ready(function(){

  $.ajax({
      url: "base_template.html",
      cache: false,
      success: function(html){
      $(".contentFinal").append(html);   // append to both places
    }
  });
});

Answer 3

使用：

<div class="contentAll" id="top"></div>
<div class="contentAll" id="bottom"></div>

$(document).ready(function(){
  $.ajax({
      url: "base_template.html",
      cache: false,
      success: function(html){
      $(".contentAll").append(html);
    }
  });
});

Ajax在一个页面上加载两个确切的id？

3 个答案: