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');

兄弟関係を保証できない場合は、何らかの方法で一意の関係を定義する必要があります。1つの例は、次のように親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 に答える