javascript - 在不刷新查询页面的情况下加载某个 div

Question

我在这里看到过很多次类似的问题，但这次有点不同。 我有一个帖子查询将内容显示为；

<div class="block1">
<a class="button" href="#">Button</a>
<div class="wholiked">content</div>
</div>
<div class="block2">
<a class="button" href="#">Button</a>
<div class="wholiked">content</div>
</div>

我试图在点击 .block1 中的按钮而不刷新页面的情况下重新加载 .block1 中的 .wholiked。 但在这种情况下，所有 block 中的所有 .wholiked 内容都会重新加载，而不是那个特定的内容。

$(function() {
      $('.button').click(function(evt) {
         $('.wholiked').load('index.php .wholiked');
         evt.preventDefault();
      })
    });

如何限制它仅在按钮所在的特定 block 内起作用？

Answer 1

您的选择器“.wholiked”正在加载具有该类的所有元素。假设您想要单击按钮旁边的按钮，请使用:

$(this).next('.wholiked').load('index.php');

如果不能保证同胞关系，则需要以某种方式定义唯一关系。一个例子是在父 div 上使用一个公共(public)父类，如下所示:

<div class="block1 block">
    <a class="button" href="#">Button</a>
    <div class="wholiked">content</div>
</div>
<div class="block2 block">
    <a class="button" href="#">Button</a>
    <div class="wholiked">content</div>
</div>

然后 JS 将是:

$(this).closest('div.block').find('.wholiked').load('index.php');

或者你可以在按钮上放置一个数据属性来定位元素:

<div class="block1">
    <a class="button" data-contentselector="#content1" href="#">Button</a>
    <div id="content1" class="wholiked">content</div>
</div>

JS:

$($(this).data('contentselector')).load('index.php');