使用jQuery刪除父Div內的Div類

Question

我在圖片上方有一個div。 我想使用jQuery click事件來刪除（或更改div類）圖像單擊上的div。

Div結構。

<div class="post">

<img class="thumb" src="MyImg.jpg">

<div class="show-div"></div>

</div>

我想將show-div類切換為remove-div。

這是我的jQuery

$(document).ready(function(){
$(".thumb").click( function(){

    $(this).parent().('.show-div').toggleClass('remove-div'); 
   });
});

我做了remove-div類，使其在CSS樣式表中不顯示任何內容。 但這似乎不起作用。 我也嘗試過

$(this).parent().find('.show-div').toggleClass('remove-div');

請注意，這是一個PHP while循環，此頁面上將有一個以上的div。

如果有人可以指出正確的方法來執行此操作，則將是最合適的方法。

Answer 1

嘗試這個：

$(document).ready(function(){
$(".thumb").click( function(){
    $(this).parent().find('div.show-div').removeClass('show-div').addClass('remove-div'); 
   });
});

Answer 2

給出的代碼有效http://jsfiddle.net/4WDet

但是，您沒有刪除.show-div ，所以如果顯示為display: block並且您的CSS規則按此順序排列就是您的問題。

.remove-div{
    display:none;
}
.show-div{
    display:block;
}

在這種情況下，請切換您的CSS樣式

.show-div{
    display:block;
}
.remove-div{
    display:none;
}

或切換兩個類別

$(this).parent().find('.show-div').toggleClass('remove-div show-div');

但是問題是，您將不會再找到該div，因此需要更改選擇器：

$(this).parent().find('.show-div, .remove-div').toggleClass('remove-div show-div');

工作實例

Answer 3

.show-div不是.thumb的父級，而是同級。 你有沒有嘗試過？

$(this).siblings('.show-div').toggleClass('remove-div');

請注意，如果有多個.show-div同級，則它將返回一個數組。

Answer 4

$(this).siblings().toggle("slow");

嘗試這個