[Javascript] Come faccio ad aggiungere o rimuovere dinamicamente classi associate ad un elemento usando jquery?



Answers

usa toggleClass() per aggiungere una classe se non è già presente o rimuoverla se è presente. poiché la logica è la stessa, puoi passare una singola funzione al hover .

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

documenti qui .

Spero possa aiutare! Saluti.

Question

Sto cercando di aggiungere e rimuovere classi in modo dinamico usando jQuery nella mia pagina web. Ecco, il codice -

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

Fondamentalmente, ci sono più classi collegate a un elemento (sub-attivo, sub-inattivo in questo caso). E sulla base di qualche evento che accade nella pagina, voglio alterare dinamicamente lo stato della classe dell'elemento. cioè, per esempio se per un elemento, la classe che è presente in questo momento è class = "sub-sub-attivo", voglio cambiare usando jquery in class = "sub sub-INACTIVE" ....

Per favore fatemi sapere come aggiungere / rimuovere classi specifiche da un elemento. Le due righe di codice fornite di seguito (dall'esempio precedente) non sembrano funzionare -

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

Grazie!




Penso che in sostanza quello che stai cercando sia qualcosa del genere ...

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

Inoltre, potresti voler controllare il tuo CSS. Non penso che l'impostazione mostri:! Importante; farà davvero qualsiasi cosa. Infatti, usando l'esempio sopra, non dovresti nemmeno aver bisogno della classe sub-active , perché la classe sub-inactive è rimossa dall'elemento, quindi revocando "display: none;" dichiarazione.




Links