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




creare div (5)

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!


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.


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.


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.


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.


Ho avuto successo con qualcosa del genere:

var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.hide();
    }
  });
});

La logica è: quando viene visualizzato #menuscontainer , associare un gestore di clic al corpo che nasconde #menuscontainer solo se il target (del clic) non è figlio di esso.







javascript jquery css dynamic addclass