如何比较两个类和 jquery？

Question

我想比较两个 class 是否相等以显示内容。我有三个 btns 和三个不同的 classes 和另外三个 divs 与三个相似的 classes 按钮。我想检查按钮上方是否等于 div 上方，然后我想显示 div 上方的元素并隐藏其他元素，当我单击按钮下方时我想做同样的事情，我尝试使用 Jquery 进行比较，首先从按钮中获取 class 名称，然后从 div 中获取 class 名称并进行比较给对方，然后把活动 class 给我想展示的那个，但我似乎有问题

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>

Answer 1

在点击处理回调函数中，先从all.tab-content元素中移除active-contentclass，然后将其添加到一个也有按钮的 class.

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

Answer 2

假设 .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();
     }
   });

});

Answer 3

我不会使用按钮的 class 来指定要切换的内容。最好为此使用数据属性，以防止未来的开发添加更多 classes 来破坏您的功能。然后，您可以使用此数据属性进行切换，方法是从所有内容中删除活动的 class，然后将 class 添加到属于被单击按钮的元素。

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

如何比较两个类和 jquery？

How to compare two classes with jquery?

html

css

jquery

class

如何比较两个 类 和 jquery？

How to compare two classes with jquery?

html

css

jquery

class

如何比较两个类和 jquery？