如何使用jQuery切換類來添加類或洗掉元素？-有解無憂

我不確定為什么我的代碼沒有回應，一切對我來說都是正確的。我是使用 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>

它應該從這里開始

如何使用 jQuery 切換類來添加類或洗掉元素？

對此

如何使用 jQuery 切換類來添加類或洗掉元素？

uj5u.com熱心網友回復：

我相信有幾個問題。首先，我相信你想這樣寫display:noneCSS 邏輯：

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

這意味著如果內部卡片也有active類，它將被隱藏。

其次，我相信您需要以這種方式重寫腳本：

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

當您使用時，toggleClass您只需要使用類的名稱，而不是選擇器（-> 無點）。此外，從 CSS 來看，您似乎需要先找到內部卡片元素。

小提琴鏈接

uj5u.com熱心網友回復：

你可能想要這樣的東西：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485318.html

標籤：javascript html jQuery css jQuery-ui

上一篇：CSS過渡沒有回應

下一篇：如何閱讀我的自定義jQuery小部件的選項？