Question

我有一个名为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

Answer 1

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

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

Answer 2

似乎有几个问题：

这样：$( "div" ).click(function() ...您正在注册所有div可用的点击。这可能会导致奇怪的行为。更好用：$("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" ) ...

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

2 个答案: