CODEWITHSUNDEEP
jqueryhtml
Ivan Plugatariov
Ivan Plugatariov

Reputation: 21

jQuery if an element has class do

I need an jQuery script that will add my img class hidden when one of my html element (for example "#3") has class active.

I did it like:

html script:

 <ul class="navUl" id="menu">
  <li class="navi head" id="1">x</li>
  <li class="navi head" id="2">y</li>
  <li class="navi head" id="3">q</li>
  <li class="navi head" id="4">w</li>
  <li class="navi head" id="5">e</li>
 </ul>

 <img src="img/cover.png" alt="cover" class="cover" id="cover">

jQuery script:

$(document).ready(function () {
 $('#3').hasClass('active', function () {
  $('#cover').addClass('hidden');
 });
});

P.S. I've already had jQuery script and it's working:

$(document).ready(function () {
 $('#menu li').on('click', function(){
  $('#menu li.active').removeClass('active');
  $(this).addClass('active');
 });
});

Upvotes: 1

Views: 283

Answers (3)

Satpal
Satpal

Reputation: 133453

Keep it simple, You can just validate that target element has class in li event handler, then perform the desired operation

$('#menu li').on('click', function() {
    $('#menu li.active').removeClass('active');
    $(this).addClass('active');

    $('#cover').toggleClass('hidden', $('#3').hasClass('active'));
});

Otherwise, Use MutationObserver and listen for attribute change

$('#menu li').on('click', function() {
  $('#menu li.active').removeClass('active');
  $(this).addClass('active');
});

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var element = $('#3').get(0);
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "attributes") {
      $('#cover').toggleClass('hidden', $('#3').hasClass('active'));
    }
  });
});

observer.observe(element, {
  attributes: true //configure it to listen to attribute changes
});
.active {
  color: red
}

.hidden {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="navUl" id="menu">
  <li class="navi head" id="1">x</li>
  <li class="navi head" id="2">y</li>
  <li class="navi head" id="3">q</li>
  <li class="navi head" id="4">w</li>
  <li class="navi head" id="5">e</li>
</ul>

<img src="img/cover.png" alt="cover" class="cover" id="cover">

Upvotes: 1

Nirav Joshi
Nirav Joshi

Reputation: 2960

You can try this example.

Hope this will helps you.

$(document).ready(function () {
 $('#menu li').on('click', function(){
   $('#menu li.active').removeClass('active');
   $(this).addClass('active');
   
   if($(this).attr("id") == "3") {
     $("#cover").addClass('hidden');
   } else {
      $("#cover").removeClass('hidden');
   }
   
 });
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navUl" id="menu">
  <li class="navi head" id="1">x</li>
  <li class="navi head" id="2">y</li>
  <li class="navi head" id="3">q</li>
  <li class="navi head" id="4">w</li>
  <li class="navi head" id="5">e</li>
 </ul>

 <img src="img/cover.png" alt="cover" class="cover" id="cover">

Upvotes: 1

Abin Thaha
Abin Thaha

Reputation: 4643

Do it like this. Hope this will help you

$(document).ready(function () {
  if($('#3').hasClass('active')) {
   $('#cover').hide() 
  }  
})

codepen

Upvotes: 0

Related Questions