jQuery 如果一个元素有类则执行

Question

我需要一个 jQuery 脚本，当我的 html 元素之一(例如 "#3")时，它会添加我的 img 类 hidden具有active类。

我这样做是这样的:

html 脚本:

 <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 脚本:

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

附注我已经有了 jQuery 脚本并且它正在工作:

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

Answer 1

保持简单，您可以在 li 事件处理程序中验证目标元素是否具有类，然后执行所需的操作

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

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

否则，请使用MutationObserver并监听属性变化

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