使用jquery/ajax重新加载Div的内容

Reload the content of a Div using jquery/ajax

本文关键字：加载 Div jquery ajax 新加载 使用      更新时间：2023-09-26

我有一个页面，当我点击菜单链接时，我想重新加载div而不刷新我的页面，此时我正在使用以下内容，但它不起作用:

$(".hidemenubook4").load(location.href + " #book4");

我的页面有4个不同的div，当我点击链接打开它们时我想重新加载:

<a class="hidemenubook1" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);"><span class="namebook1origin">Book1</span></a>
<a class="hidemenubook2" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);"><span class="namebook2origin">Book2</span></a><br/>   
<a class="hidemenubook3" id="launcherbook3b" data-fancybox-group="book3" href="javascript:void(0);"><span class="namebook3origin">Book3</span></a><br/>     
<a class="hidemenubook4" id="launcherbook4b" data-fancybox-group="book4" href="javascript:void(0);" onClick="parent.jQuery.fancybox.close();"><span class="namebook4origin">Book4</span></a><br/>
<div id="book1"><div class="thumbnails">
  <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a>
  ... 
</div></div>
<div id="book2"><div class="thumbnails">
  <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a>
  ... 
</div></div>
<div id="book3"><div class="thumbnails">
  <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a>
  ... 
</div></div>
<div id="book4"><div class="thumbnails">
  <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a>
  ... 
</div></div>

您正在尝试将内容加载到.hidemenubook4，这是<a>链接!

不知道你想用"hidemenubook"做什么，但要加载内容，使用:

$("#book4").load(location.href + " #book4");

如果你想在锚点点击时这样做，那么:

$(".hidemenubook4").click(function() {
    $("#book4").load(location.href + " #book4");
});

更新:

对于可重用的版本，您可以做一些更改。

  • 首先，给每个链接一个相同的类(或者把它们放在同一个父类下)
    • 第二，给他们一个data-链接他们(你已经有了)
  • 第三，使用类来分配处理程序和数据以找到匹配的div

, 

<a class="hidemenubook" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);"><span class="namebook1origin">Book1</span></a>
<a class="hidemenubook" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);"><span class="namebook2origin">Book2</span></a><br/>

: 

$(".hidemenubook").click(function() {
    var book = "#" + $(this).data("fancybox-group");
    $(book).load(location.href + " " + book);
});
相关文章：