Question

我有这种情况的div网格，其类person-s4，其中包含一系列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');

  });
}

现在，我想通过点击is-open删除课程close-btn，我写了这段代码但是没有用。

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/

更新：仅在问题中切换的元素。

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

jQuery .removeClass（）不起作用

2 个答案: