使用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");

尝试这个