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/