加載某個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中的.wholiked，點擊.block1中的按鈕而不刷新頁面。 但是在這種情況下，所有塊中的所有.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');