Question

当我的一个html元素（例如img）具有类hidden时，我需要一个jQuery脚本来添加我的"#3"类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');
 });
});

P.S。我已经有了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">

Answer 2

你可以尝试这个例子。

希望这会对你有所帮助。

＆＃13;

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

＆＃13;

.hidden {
display: none;
}

＆＃13;

<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">

＆＃13;

Answer 3

这样做。希望这会对你有所帮助

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

codepen

jQuery，如果一个元素有类做

3 个答案: