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




2 Answers

Un semplice cambiamento

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

Quando usi toggleClass() , le cose diventano ancora più semplici:

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

Ad ogni modo non ha molto senso avere una classe extra per lo stato inattivo. Basta .sub con l'aspetto inattivo (predefinito) e attivare un .sub-active per quelli attivi.

Questa è una classe in meno di cui preoccuparsi e gli elementi non possono mai accidentalmente avere entrambi gli stati allo stesso tempo.

creare div

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!




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.




Related

javascript jquery css dynamic addclass