jQuery .removeClass（）不起作用

Question

我有这种情况的网格与person-s4类的div与一系列div在其中。

<div class="person-s4"> 
    <div class="is-closed"> <!--THIS IS DISPLAY:NONE --> 
    <img src="assets/img/close.svg" class="close-btn"> 
    </div> 
    <div class="img-person-s4"> 
    <img src="assets/img/people/nb.png" class="small"> 
    <img src="assets/img/people/#" class="big"> <!--THIS IS DISPLAY:NONE --> 
    </div> 
    <div class="initials-person-s4"> 
    <h2>BLA BLA BLA</h2> 
    <p class="initial1">N</p> 
    <p class="initial2">B</p> 
    <h3 class="person-role">BLA BLA BLA</h3> 
    <p class="bio">#</p> 
    <h4 class="link">#</h4> 
    </div> 

我为了扩大他们在点击

function personOpen() { 
    $('.person-s4').click(function personBig() { 

    $(this).addClass('is-open'); 

    }); 
} 

现在，我想通过点击close-btn删除类is-open写了一些代码，我写了这个代码，但不起作用。

function personClose() { 
    $('.close-btn').click(function personSmall() { 

    $('.person-s4').removeClass('is-open'); 

    }); 
} 

有什么能阻止.removeClass()函数的工作？

我没有创建DOM元素，我只是向他们展示它们。

Answer 1

您不想在类似的命名函数中添加事件监听器，除非您真的想控制何时添加事件监听器。你的代码更改为：

$(function() { 
    $('.person-s4').click(function() { 

    $(this).addClass('is-open'); 

    }); 
}); 

和

$(function() { 
    $('.close-btn').click(function() { 

    $('.person-s4').removeClass('is-open'); 

    }); 
}); 

这样一旦DOM完全加载的事件监听器被加入。而且您不必专门调用函数来添加事件侦听器。

编辑：对不起，我复制了你的原始代码，并没有注意到你已经命名了点击函数处理程序。你也不这样做。

你有

$('.person-s4').click(function personBig(){ ... }); 

，将无法正常工作的功能应该是一个匿名函数。

$('.person-s4').click(function(){ ... }); 

Answer 2

看起来你的DOM结构不正确。您首先需要创建一个包装隐藏内容的容器div。另外，您不需要添加或删除类。简单的切换可以完成这项工作。

<div class="person-s4">Click 
    <div class="is-closed"> <!--THIS IS DISPLAY:NONE --> 
     <img src="assets/img/close.svg" class="close-btn">X</img>  
    <div class="img-person-s4"> 
    <img src="assets/img/people/nb.png" class="small"> 
    <img src="assets/img/people/#" class="big"> <!--THIS IS DISPLAY:NONE --> 
    </div> 
    <div class="initials-person-s4"> 
    <h2>BLA BLA BLA</h2> 
    <p class="initial1">N</p> 
    <p class="initial2">B</p> 
    <h3 class="person-role">BLA BLA BLA</h3> 
    <p class="bio">#</p> 
    <h4 class="link">#</h4> 
    </div> 
     </div> 

$('.person-s4, .close-btn').click(function() { 
    $(this).find(".is-closed").toggle("is-open"); 
    }); 

http://jsfiddle.net/njzatgku/

UPDATE：要切换仅在问题<!-- THIS IS DISPLAY:NONE -->的元素。

http://jsfiddle.net/njzatgku/2/