如何使用 jQuery 切换 class 来添加 class 或删除元素？

Question

我不确定为什么我的代码没有响应，对我来说一切看起来都是正确的。我刚开始使用 jQuery 并尝试使用 toggleClass 在单击我页面上的卡片时显示卡片信息。最初，我希望它被隐藏但能够打开和关闭。

$(document).ready(function() {
  $('.card').click(function() {
    $(this).toggleClass('inner-card.active');
  });
});

.card {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 350px;
  height: 180px;
  background: lightgreen;
  border: 2px solid black;
  margin-left: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.inner-card .active {
  display: none;
}

.inner-card {
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: rgba(255, 165, 0, 0.5)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="inner-card">
    <h5>Title</h5>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
    <a href="">Link goes here</a>
    <div class="img-div">
      <img src="../static/img/search.png" class="card-img" alt="">
    </div>
  </div>
</div>

应该从这里开始

对此

Answer 1

我认为有几个问题。首先，我相信你想这样写 display:none CSS 逻辑：

.inner-card.active{
    display: none;
}

这意味着如果内卡也有active class.

，则内卡将被隐藏

其次，我认为您需要这样重写脚本：

 $(document).ready( function(){
     $('.card').click( function() {
         $(this).find(".inner-card").toggleClass('active');
     });
 });

当您使用 toggleClass 时，您只需使用 class 的名称，而不是选择器（-> 无点）。另外，从CSS来看，好像需要先找到里面的card元素。

Fiddle link

Answer 2

您可能想要这样的东西：

$(document).ready(function() {
  $('.card').click(function() {
    $(this).find(".inner-card").toggleClass('hidden');
  });
});

.card {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 350px;
  height: 180px;
  background: lightgreen;
  border: 2px solid black;
  margin-left: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.inner-card {
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: rgba(255, 165, 0, 0.5)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="inner-card hidden">
    <h5>Title</h5>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
    <a href="">Link goes here</a>
    <div class="img-div">
      <img src="../static/img/search.png" class="card-img" alt="magnify lens">
    </div>
  </div>
</div>

如何使用 jQuery 切换 class 来添加 class 或删除元素？

How do I use jQuery toggle class to add class or remove element?

html

javascript

css

jquery

jquery-ui