如何使用 ajax 在文件中加载特定的 div/类？答案

【问题标题】：How to load a specific div/class in a file using ajax?如何使用 ajax 在文件中加载特定的 div/类？
【发布时间】：2016-06-10 18:56:43
【问题描述】：

我有一个名为 main.html 的文件，其中包含几个 div，每个 div 有 2 个类：第一个是他们的特定类第二个是一个名为menu-item 的类，我用它来确定单击时是否会触发事件。

该文件包含以下内容：

<div id="load-here">

</div>

<div class="item-1 menu-item">
    click this
</div>

我还有一个 gallery.html 文件，我想将其加载到 #load-here div 中的 main.html 文件中，假设它包含以下内容：

<div class="menu-item>
    <!-- some image here -->
    <img href="img/1.jpg />
</div>

我的脚本是这样的：

$(document).ready(function() {
    $( "div" ).click(function() {

        if ( $( this ).hasClass( "menu-item" ) ) {
            $("#load-here").load("gallery.html" + this.class);
        }

    });
});

问题：它不起作用。我尝试了各种改变。不知何故，它没有加载到#load-here div

【问题讨论】：

你是在网络服务器上运行它还是直接在浏览器中使用file://打开那个html文件？
可能被stackoverflow.com/questions/18618865/…欺骗
没有this.class .... 未定义。即使有它也会包含"menu-item" 和它前面的空格
为什么要把this.class加到url中？您可以使用 this.className 但这是什么想法？
@kabirbaidhya 你是对的，我在本地环境的 file:// 上运行它。它不适合吗？

标签： javascript jquery css ajax web

【解决方案1】：

似乎有几个问题：

通过此：$( "div" ).click(function() ... 您正在注册点击所有可用的divs。这可能会导致奇怪的行为。更好用：$("div.menu-item").click( ...
确保您了解回调函数中的上下文和事件目标。有时this 会欺骗你，因为通话的上下文可能不同。如果您将事件作为显式参数处理并检查事件目标，事情会更清楚。
我猜你想为你的gallery.html 提供一个参数，但正如@charlietfl 提到的，没有.class。但是，在 DOM 中有一个 .className。最好尝试使用 jQuery $().attr('class')。另外，参数需要一个分隔符：gallery.html?parameter

总结一下，我的建议是：

$("div.menu-item").click( function(event) { 

  var jqTarget = $(event.target).closest('.menu-item');

  if ( jqTarget.hasClass( "menu-item" ) ) {
    $("#load-here").load("gallery.html" + "?" + this.class);
  }

});

closest() 将尝试找到最接近的匹配元素，以防点击目标不在div 本身，而是在img 的子元素上。因此，应该使用建议中的条件来更具体地了解单击了哪个菜单项：if ( jqTarget.hasClass( "that-specific-item" ) ...

【讨论】：

【解决方案2】：

看看这个：http://api.jquery.com/load/

$( "#b" ).load( "article.html #target" );

【讨论】：