jQuery .removeClass()无法正常工作 [英] jQuery .removeClass() not working

问题描述

在这种情况下，我是一个类为person-s4的div网格，其中包含一系列div.

I have this situation a grid of divs with class of person-s4 with a series of div in it.

<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>

我写了一些代码，以便在点击时扩展它们

I wrote some code in order to expand them on click

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

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

  });
}

现在，我想通过单击close-btn来删除类is-open，我编写了此代码，但是不起作用.

Now, I want to remove the class is-open by clicking on the close-btn, I wrote this code but doesn't work.

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

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

   });
}

有什么阻碍.removeClass()功能起作用的东西吗?

There is anything that prevent the .removeClass() function to work?

我不是在创建DOM元素，而是在显示它们.

I'm not creating DOM elements, I am just showing them.

推荐答案

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

It seems like the structure of your DOM is not correct. You first need to create a container div that wraps your hidden contents. Also, you don't need to add or remove class. A simple toggle would do the job.

<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/

更新:仅切换问题中带有<!-- THIS IS DISPLAY:NONE -->的元素.

UPDATE : To toggle only the elements with <!-- THIS IS DISPLAY:NONE --> in the question.

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

这篇关于jQuery .removeClass()无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！