2

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

<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 而不刷新页面。但在这种情况下，所有块中的所有 .wholiked 内容都会重新加载，而不是特定的内容。

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

如何将其限制为仅在按钮所在的特定块内起作用？

4

1 回答 1

1

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

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

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

<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');
于 2013-01-20T22:07:28.187 回答