gpt4 book ai didi

javascript - 我如何使用 jquery 动态添加或删除附加到元素的类?

转载 作者:行者123 更新时间:2023-11-30 07:28:05 24 4
gpt4 key购买 nike

我正在尝试在我的网页中使用 jQuery 动态添加和删除类。这是代码 -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.sub-inactive{display:none;}
.sub-active{display:!important;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.sub').parent().hover(
function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); },
);
});
</script>
</head>
<body>
<div id="container">
<ul class="main">
<li>link1</li>
<li>link2</li>
<li>link3
<ul class="sub sub-inactive">
<li>link 3a</li>
<li>link 3a</li>
<li>link 3a</li>
<li>link 3a</li>
</ul>
</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</body>
</html>

基本上,有多个类附加到一个元素(在本例中为子事件、子非事件)。基于页面中发生的某些事件,我想动态更改元素的类状态。即,例如,如果对于一个元素,现在存在的类是 class = "sub sub-active",我想使用 jquery 更改为 class = "sub sub-INACTIVE"...

请让我知道如何从元素中添加/删除特定类。下面给出的两行代码(来自上面的示例)似乎不起作用 -

function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); },
function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); }

谢谢!

最佳答案

一个简单的改变

$(document).ready(function(){
$('.sub').parent().hover(
function(){ $('.sub', this).removeClass('sub-inactive').addClass('sub-active'); },
function(){ $('.sub', this).removeClass('sub-active').addClass('sub-inactive'); },
);
});

当您使用 toggleClass() 时,事情变得更加简单:

$(document).ready(function(){
$('.sub').parent().hover(function() {
$('.sub', this).toggleClass('sub-inactive sub-active');
});
});

无论如何,为非事件状态添加一个额外的类并没有多大意义。只需将 .sub 样式设置为非事件(默认)外观,然后将 .sub-active 切换为事件外观。

这样就少了一个需要担心的类,元素永远不会意外地同时拥有两种状态。

关于javascript - 我如何使用 jquery 动态添加或删除附加到元素的类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7825967/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com