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

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

如何限制它仅在按钮所在的特定块内进行操作？

Answer 1

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

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

如果你不能保证siblign关系，你需要以某种方式定义一个独特的关系。一个例子是在父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');

加载某个div而不刷新查询中的页面

1 个答案: