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样式表中显示为none。但这似乎没有用。我也试过

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

<强> Working example

Answer 3

.show-div不是.thumb的父母，而是兄弟姐妹。你试过吗？

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

注意，如果有多个.show-div兄弟，这将返回一个数组。

Answer 4

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

试试这个

使用jQuery删除父Div内的Div类

4 个答案: