how do i dynamically add or remove classes attached to an element using 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>

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

Thanks!

回答1:

One simple change

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

When you use toggleClass(), things become even easier:

$(document).ready(function(){
  $('.sub').parent().hover(function() {
    $('.sub', this).toggleClass('sub-inactive 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.

回答2:

use toggleClass() to add a class if not already present, or remove it if it is present. because the logic is the same, you can just pass a single function to hover.

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

docs here.

hope that helps! cheers.

回答3:

I guess my own code (in the question), though not efficient, actually works. The issue was with one extra comma at the end of mouseleave function within the hover event -

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

the comma at the end of second line of code above caused the error in JS, and all the while i thought the issue was with the way i used removeClass and addClass.

thanks for helping everyone, i learned a bit from the above two responses.

回答4:

I think basically what you're looking for is something like this...

<script type="text/javascript">
$(document).ready(function(){
    $('.sub').parent().hover(function(){ 
        $(this).find('ul.sub').removeClass('sub-inactive').addClass('sub-active');
    });
    $('.sub').parent().mouseout(function(){
        $(this).find('ul.sub').removeClass('sub-active').addClass('sub-inactive');
    });
});

Also, you might want to check your CSS. I don't think that setting display:!important; will actually do anything. In fact, using the above example, you shouldn't even need the sub-active class, because the sub-inactive class is stripped from the element, therefore revoking the "display:none;" statement.

来源：https://stackoverflow.com/questions/7825967/how-do-i-dynamically-add-or-remove-classes-attached-to-an-element-using-jquery

标签

javascript

jquery

css

dynamic

addclass