如何使用jquery动态添加或删除附加到元素的类？ [英] how do i dynamically add or remove classes attached to an element using jquery?
问题描述
我想在我的网页中使用jQuery动态添加和删除类。这里;代码 -
I'm trying to add and remove classes dynamically using jQuery in my webpage. Here;s the code -
<!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....
Basically, there are multiple classes attached to an element (sub-active, sub-inactive in this case). And based on some event that happens in the page, i want to dynamically alter the class state of the element. ie, for example if for an element, the class that is present right now is class = "sub sub-active", i want to change using jquery to class = "sub sub-INACTIVE"....
请让我知道如何从元素中添加/删除特定的类。下面给出的两行代码似乎不起作用 -
Please let me know how to add/remove specific classes from an element. The two lines of code given below (from the above example) does not seem to work -
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 。
Anyway it doesn't make too much sense to have an extra class for the inactive state. Just style .sub with the inactive (default) look and toggle a .sub-active for the active ones.
这是一个少一点的担心，元素永远不会意外同时有两个状态。
That's one less class to worry about and elements can never accidentally have both states at the same time.
这篇关于如何使用jquery动态添加或删除附加到元素的类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
