jQuery 对孩子运行 removeClass/addClass 函数答案

【问题标题】：jQuery Running a removeClass/addClass function to a childjQuery 对孩子运行 removeClass/addClass 函数
【发布时间】：2015-11-06 03:40:26
【问题描述】：

$(document).ready(function() {
  $(".drop-box").click(function() {
    $(".drop-box:eq(2)").removeClass("contracted contract");
    $(".drop-box:eq(2)").addClass("drop");
  });
});

$(document).ready(function() {
  $(".drop-box").click(function() {
    $(".drop-box:eq(2)").removeClass("drop");
    $(".drop-box:eq(2)").addClass("contract");
  });
});

.drop-box {
  width: 300px;
  height: auto;
  background-color: red;
  border-radius: 20px 20px 0px 0px
}
.drop-box-title {} .drop-image-box {
  overflow: hidden;
}
img {
  width: 100%;
}
.image-box-text,
h2 {
  text-align: center;
}
.contracted {
  height: 0px
}
@-webkit-keyframes drop {
  0% {
    height: 0px;
  }
  100% {
    height: 300px;
  }
}
.drop {
  height: auto;
  -webkit-animation-name: drop;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: drop;
  animation-duration: 2s;
}
@-webkit-keyframes contract {
  0% {
    height: 300px;
  }
  100% {
    height: 0px;
  }
}
.contract {
  height: 0px;
  -webkit-animation-name: contract;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: contract;
  animation-duration: 2s;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <div class="drop-box">
    <div class="drop-box-title">
      <h2>Image Title</h2>
    </div>
    <div class="drop-image-box contracted">
      <img src="http://placehold.it/350x350" alt="...">
    </div>
    <div class="drop-box-description">
      <p class="image-box-text">A breif Description of the image</p>
    </div>
  </div>

</body>

</html>

您好，我正在尝试使用 addClass 和 removeclass 在 jQuery 中创建一些扩展图像框。（可能有更简单的方法，但我是新手。）

我正在使用类，因为会有许多相同的图像框，所以我尝试使用 :eq 来选择每个类的第二个孩子，但我无处可去。

如果有人可以帮助我，我将不胜感激。

谢谢。

【问题讨论】：

最简单的方法是使用toggleClass。 答案： $(document).ready(function () { $(".drop-box").click(function () { $(".drop-box:eq(2)").removeClass('contracted').toggleClass("drop contract"); }); });
在同一个元素上不需要两个ready 和两个事件处理程序。当事件发生时，这两个处理程序都会运行。

标签： jquery addclass children

【解决方案1】：

$(document).ready(function() {
  $(".drop-box").click(function() {
    $(".drop-box:eq(1)").removeClass("drop");
    $(".drop-box:eq(1)").addClass("contract");
  });
});

.drop-box {
  width: 300px;
  height: auto;
  background-color: red;
  border-radius: 20px 20px 0px 0px
}
.drop-box-title {} .drop-image-box {
  overflow: hidden;
}
img {
  width: 100%;
}
.image-box-text,
h2 {
  text-align: center;
}
.contracted {
  height: 0px
}
@-webkit-keyframes drop {
  0% {
    height: 0px;
  }
  100% {
    height: 300px;
  }
}
.drop {
  height: auto;
  -webkit-animation-name: drop;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: drop;
  animation-duration: 2s;
}
@-webkit-keyframes contract {
  0% {
    height: 300px;
  }
  100% {
    height: 0px;
  }
}
.contract {
  height: 0px;
  -webkit-animation-name: contract;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: contract;
  animation-duration: 2s;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <div class="drop-box">
    <div class="drop-box-title">
      <h2>Image Title</h2>
    </div>
    <div class="drop-image-box contracted">
      <img src="http://placehold.it/350x350" alt="...">
    </div>
    <div class="drop-box-description">
      <p class="image-box-text">A breif Description of the image</p>
    </div>
  </div>
  <div class="drop-box">
    <div class="drop-box-title">
      <h2>Image Title</h2>
    </div>
    <div class="drop-image-box contracted">
      <img src="http://placehold.it/350x350" alt="...">
    </div>
    <div class="drop-box-description">
      <p class="image-box-text">A breif Description of the image</p>
    </div>
  </div>
  
    <div class="drop-box">
    <div class="drop-box-title">
      <h2>Image Title</h2>
    </div>
    <div class="drop-image-box contracted">
      <img src="http://placehold.it/350x350" alt="...">
    </div>
    <div class="drop-box-description">
      <p class="image-box-text">A breif Description of the image</p>
    </div>
  </div>

</body>

</html>

【讨论】：

更新了他需要第二个元素的代码，所以我有更改$(".drop-box:eq(1)").removeClass("drop")