How to compare two classes with jquery?-CodePudding

I want to compare two classes if they're equal to display the content. I have three btns with three different classes and three other divs with three similar classes to buttons. I want to check if Over the button is equal to over the div,then i want to show the element inside over the div, and hide the other elements,and when i click on the under the button i want to do the same, I have tried with Jquery to compare to first get the class name from the button and get the class name from the div and compare them to each other and then give the active class to the one that i want to show it but it seems that i have something wrong

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 >
     <button >Over</button>
    <button >Under</button>
    <button >Other</button>
         </div>
    <div >
      <h1 >Show Over elements</h1>
    </div>
    <div >
      <h1>Show Under elements</h1>
    </div>
    <div >
     <h1>Show Other Elements</h1>
    </div>

CodePudding user response：

I wouldn't use the class of the buttons to specify which content to toggle. It is better to use a data attribute for that to prevent future developments that add more classes to bug your functionality. Then you can use this data attribute for toggling by removing the active class from all and then adding the class to the element belonging to the clicked button.

$('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 >
  <button data-active-content="over" >Over</button>
  <button data-active-content="under" >Under</button>
  <button data-active-content="other" >Other</button>
</div>
<div >
  <h1>Show Over elements</h1>
</div>
<div >
  <h1>Show Under elements</h1>
</div>
<div >
  <h1>Show Other Elements</h1>
</div>

CodePudding user response：

Inside the click handler callback function, remove the active-content class from all .tab-content elements first, and then add it to the one that also has the button's 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 >
 <button >Over</button>
<button >Under</button>
<button >Other</button>
     </div>
<div >
  <h1 >Show Over elements</h1>
</div>
<div >
  <h1>Show Under elements</h1>
</div>
<div >
 <h1>Show Other Elements</h1>
</div>

CodePudding user response：

Assuming .tab-content is hidden by default, you can try something like this:

$('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();
     }
   });

});