webentwicklung-frage-antwort-db.com.de

jQuery addClass onClick

Die Einstellung ist einfach; Ich möchte in der Lage sein, eine Klasse zu (in diesem Fall) einer Schaltfläche hinzuzufügen, wenn das onClick-event ausgelöst wird. Mein Problem ist, dass ich keinen Weg gefunden habe, die Schaltfläche selbst als Parameter an die Funktion zu übergeben. Ich möchte etwas tun wie:

<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/>

Und dann eine JavaScript-Funktion wie folgt:

function addClassByClick(button){
    button.addClass("active")
}

Ich weiß, ich habe hier eine Menge Fehler, aber deshalb poste ich. Ich habe verschiedene Szenarien mit jQuery und ohne jQuery ausprobiert, aber am Ende habe ich immer eine kaputte Lösung (Klicks hören plötzlich auf, Klasse wird nicht hinzugefügt usw.).

Irgendwelche Vorschläge, was ich probieren kann? Danke für das Lesen von edit und all der Hilfe!

23
Phil

Es muss ein jQuery-Element sein, um .addClass() verwenden zu können. Es muss also so in $() eingeschlossen werden:

function addClassByClick(button){
  $(button).addClass("active")
}

Eine bessere Gesamtlösung wäre zum Beispiel ein unauffälliges Skript:

<asp:Button ID="Button" runat="server" class="clickable"/>

Dann in jquery:

$(function() {                       //run when the DOM is ready
  $(".clickable").click(function() {  //use a class, since your ID gets mangled
    $(this).addClass("active");      //add the class to the clicked element
  });
});
43
Nick Craver

JQuery verwenden:

$('#Button').click(function(){
    $(this).addClass("active");
});

Auf diese Weise müssen Sie Ihr HTML-Markup nicht mit onclick-Handlern verschmutzen.

10
$(document).ready(function() {
    $('#Button').click(function() {
        $(this).addClass('active');
    });
});

sie sollten den Trick ausführen, es sei denn, Sie laden den Button mit ajax. In diesem Fall könnten Sie:

$('#Button').live('click', function() {...

Denken Sie auch daran, dieselbe ID nur einmal in Ihrem HTML-Code zu verwenden.

2
demux

Versuchen Sie, Ihre CSS spezifischer zu gestalten, damit der neue (grüne) Stil spezifischer ist als der vorherige, sodass er für mich funktioniert hat!

Zum Beispiel könnten Sie in css verwenden:

button:active {/*your style here*/}

Anstelle von (funktioniert wahrscheinlich nicht):

.active {/*style*/} (.active is not a pseudo-class)

Ich hoffe es hilft!

0
viridis
$('#button').click(function(){
    $(this).addClass('active');
});
0
kevtrout