Erkennen zweiten Klick auf die Schaltfläche

Question

Ich möchte CSS auf eine Schaltfläche ändern. Auf den ersten Klick und auf den zweiten. Ich habe das aber es funktioniert nicht. Niemals .clic-two hinzufügen

Answer 1

Eine andere Möglichkeit ist die Verwendung der allgemeinen Klasse als Selektor. Da das DOM dynamisch ist, müssten Sie die CSS-Klasse verwenden, die sich nach einer Benutzerinteraktion nicht ändert.

$(".prev-next-links, .prev-next-links a").click(function() { 
 

 
    if ($(this).hasClass("no-clic")) { 
 
    
 
    $(this).removeClass('no-clic'); 
 
    $(this).addClass('clic-one'); 
 
    } else if ($(this).hasClass("clic-one")) { 
 
    $(this).removeClass('clic-one'); 
 
    $(this).addClass('clic-two'); 
 
    } 
 

 

 

 
});

.prev-next-links { 
 
    font-weight: bold; 
 
} 
 
.no-clic { 
 
    background-color: gray; 
 
} 
 
.clic-one { 
 
    background-color: aqua; 
 
} 
 
.clic-two { 
 
    background-color: lime; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="prev-next-links no-clic">First 
 
    </li> 
 
    <li class="prev-next-links"><a class="no-clic" href="#">Second</a> 
 
    </li> 
 

 
</ul>

Answer 2

Sie entfernen/fügen die Klasse hinzu, was bedeutet, dass die Eigenschaft im DOM dynamisch ist. Und für die dynamischen Elemente, müssen Sie Ereignis Delegation Methode verwenden, um Arbeit:

$(".prev-next-links").on('click','li.no-clic',function() { 
    $(this).removeClass('no-clic'); 
    $(this).addClass('clic-one'); 
}); 
$(".prev-next-links").on('click','li.click-one',function() { 
    $(this).removeClass('clic-one'); 
    $(this).addClass('clic-two'); 
}); 

Weitere Infos zu event delegation.

---

Aber ich würde vorschlagen, dass Sie ein Flag-Variable gesetzt zu überprüfen, ob es zweites Mal angeklickt wird:

var clickedTime = 0; 
$(".prev-next-links li").click(function() { 
    clickedTime++; 
    $(this).toggleClass('click-one',clickedTime % 2 == 0); 
}); 

Geben Sie für toggleClass docs.

Answer 3

Das Problem liegt daran, dass Sie die .clic-one-Klasse dynamisch zuweisen, nachdem die Seite geladen wurde, aber Sie hängen das Click-Ereignis an die .click-one Schaltflächen beim Laden, bevor sie vorhanden sind.

Um dieses Problem zu lösen, die Sie delegierten Ereignishandler verwenden sollten:

den einzigen Aufruf toggleClass() über die Verwendung von addClass()/ removeClass() beachten

$('.prev-next-links').on('click', '.no-clic', function() { 
    $(this).toggleClass('no-clic clic-one'); 
}).on('click', '.clic-one', function() { 
    $(this).toggleClass('clic-one clic-two'); 
}); 

auch separat.