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

我有一个名为main.html的文件，其中包含几个div，每个div有2个类： 第一个是它们的特定类第二个是名为

菜单项的类，我用它来确定单击时是否会触发事件

该文件包含以下内容：

<div id="load-here">

</div>

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

<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
看看这个：

似乎有几个问题：

这样：
$（“div”）。单击（function（）…
您正在注册所有可用的
div
上的单击。这可能会导致奇怪的行为。最好使用：
$（“div.menu-item”）。单击（…
确保您理解回调函数中的上下文和事件目标。有时
这会欺骗您，因为调用的上下文可能不同。如果您将事件作为显式参数处理并检查事件目标，事情会更清楚

我想您可能想为gallery.html提供一个参数，但正如@charlietfl提到的，没有
.class
。但是，在DOM中有一个。最好尝试使用jQuery
$（）.attr（'class'）
。此外，该参数需要一个分隔符：
gallery.html？参数
总而言之，我的建议如下：

$("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（“该特定项”）…
您是使用web服务器运行此项，还是使用
文件：//
直接在浏览器中打开该html文件？可能的重复项没有
。此类
…未定义。即使有，它也将包含
”菜单项“
和它前面的空格为什么要将此.class添加到url？您可以使用此.className，但这是什么意思？@kabirbaidhya您是对的，我正在本地环境的文件：//上运行它。它不适用于此吗？”？
$("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);
  }

});