我需要一个 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');
});
});
最佳答案
保持简单,您可以在 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">
关于jQuery 如果一个元素有类则执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45253768/