如何用jquery比較兩個類？

我想比較兩個類是否相等以顯示內容。我有三個具有三個不同類的 btns 和三個具有三個與按鈕類似的類的 div。我想檢查按鈕上方是否等于 div 上方，然后我想在 div 上方顯示元素，并隱藏其他元素，當我單擊按鈕下方時，我想做同樣的事情，我已嘗試與 Jquery 進行比較，以首先從按鈕獲取類名并從 div 獲取類名并將它們相互比較，然后將活動類提供給我想要顯示的類，但似乎我有有事嗎

var className = $(this).attr('class');
      var tabContent = $('.tab-content').hasClass(className);
      var classNameBtnsName = $(this).hasClass(className);
$('button').click(function () {
if (tabContent === classNameBtnsName) {
         $('.tab-content').addClass("active-content");
                 } else {
                     $('.tab-content').removeClass("active-content");
                 }

})
      

 .active-content h1{
      display:block;
    }
    h1{
      display:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="btns-container">
     <button class="over">Over</button>
    <button class="under">Under</button>
    <button class="other">Other</button>
         </div>
    <div class="tab-content over active-content">
      <h1 >Show Over elements</h1>
    </div>
    <div class="tab-content under">
      <h1>Show Under elements</h1>
    </div>
    <div class="tab-content other">
     <h1>Show Other Elements</h1>
    </div>

uj5u.com熱心網友回復：

我不會使用按鈕的類來指定要切換的內容。最好使用資料屬性來防止未來的開發添加更多類來錯誤您的功能。然后，您可以使用此資料屬性進行切換，方法是從所有中洗掉活動類，然后將該類添加到屬于單擊按鈕的元素。

$('button.togglebutton').on('click', (e) => {
  $('.tab-content').removeClass('active-content');
  $('.tab-content.'   $(e.currentTarget).data('active-content')).addClass('active-content');
});

.active-content h1 {
  display: block;
}

h1 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns-container">
  <button data-active-content="over" class="togglebutton">Over</button>
  <button data-active-content="under" class="togglebutton">Under</button>
  <button data-active-content="other" class="togglebutton">Other</button>
</div>
<div class="tab-content over active-content">
  <h1>Show Over elements</h1>
</div>
<div class="tab-content under">
  <h1>Show Under elements</h1>
</div>
<div class="tab-content other">
  <h1>Show Other Elements</h1>
</div>

uj5u.com熱心網友回復：

在單擊處理程式回呼函式中，首先從所有active-content元素中洗掉該類，然后將其添加到也具有該按鈕類的元素中。 .tab-content

$('.btns-container button').on('click', function() {
  $('.tab-content').removeClass('active-content');
  $('.tab-content.'   this.className).addClass('active-content');
});

.active-content h1{
  display:block;
}
h1{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns-container">
 <button class="over">Over</button>
<button class="under">Under</button>
<button class="other">Other</button>
     </div>
<div class="tab-content over active-content">
  <h1 >Show Over elements</h1>
</div>
<div class="tab-content under">
  <h1>Show Under elements</h1>
</div>
<div class="tab-content other">
 <h1>Show Other Elements</h1>
</div>

uj5u.com熱心網友回復：

假設 .tab-content 默認是隱藏的，你可以嘗試這樣的事情：

$('button').click(function() {
   // Get class from clicked button
   var btnClass = $(this).attr('class');

   $('.tab-content').each(function() {
     // If tab-content has same class as button, show this
     if ($(this).hasClass(btnClass)) {
       $(this).show();
     } else {
       $(this).hide();
     }
   });

});

標籤：html jQuery css 班级

上一篇：Jquery僅在重定向后向下滾動

下一篇：從表格json資料中填充選擇元素的干凈方法