javascript - tag - Come faccio ad aggiungere o rimuovere dinamicamente classi associate ad un elemento usando jquery?




jquery aggiungere html (3)

Immagino che il mio codice (nella domanda), anche se non efficiente, funzioni effettivamente. Il problema era con una virgola in più alla fine della funzione di mouseleave all'interno dell'evento hover -

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

la virgola alla fine della seconda riga di codice sopra causava l'errore in JS, e per tutto il tempo pensavo che il problema fosse con il modo in cui usavo removeClass e addClass.

grazie per l'aiuto di tutti, ho imparato un po 'dalle due risposte precedenti.

https://code.i-harness.com

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.


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.







addclass