Javascript/jQuery - Wie bekomme ich den Namen der Klasse des angeklickten element?

Habe ich gegoogelt und gegoogelt und ich habe festgestellt, dass es sehr schwer ist, sich Antwort auf meine eigene.

Ich versuche, mit jquery oder JavaScript erhalten Sie eine Eigenschaft der angeklickten element. Ich kann".hash - " zum Beispiel - es gibt hash-Wert, den ich vermute.

Nun würde ich gerne den Namen der Klasse des angeklickten element.
Ist es überhaupt möglich? Wie? Und wo würde ich finden, dass diese Art von Informationen?

  • jQuery-Dokumentation? - Alle, die ich finden kann, ist-Methoden und-plugins, keine Eigenschaften.. wenn Ihr es - bitte stellen Sie mir den link.

  • JavaScript-Dokumentation? - gibt es auch nur eine umfassende ein? bitte nochmal einen link.

  • DOM-Dokumentation? - die auf W3C oder wo (link geschätzt).

Ist und was this.hash? - DOM-JavaScript-oder jQuery?

InformationsquelleAutor der Frage zwolin | 2010-09-23

  1. 10

    In jQuery, wenn Sie legen eine click Ereignis für alle <div> - tags (zum Beispiel), können Sie erhalten, es ist Klasse wie folgt aus:

    Beispiel: http://jsfiddle.net/wpNST/

    $('div').click(function() {
    var theClass = this.className;  //"this" is the element clicked
    alert( theClass );
});

    Diese verwendet die jQuery - .klicken Sie auf(fn) Methode zuordnen, um die hf, aber der Zugang der className Eigenschaft direkt aus dem DOM-element, auf das geklickt wurde, diese vertreten durch den this.

    Gibt es jQuery-Methoden, die dies tun, wie gut, wie .attr().

    Beispiel: http://jsfiddle.net/wpNST/1/

    $('div').click(function() {
    var theClass = $(this).attr('class');
    alert( theClass );
});

    Hier wickelte ich das DOM-element mit einem jQuery-Objekt, so dass Sie können verwenden Sie die Methoden zur Verfügung, die von jQuery. Die .attr() Methode hier bekommt die Klasse, die festgelegt wurde.

    InformationsquelleAutor der Antwort user113716

  2. 11

    Diesem Beispiel wird auf jedes element auf der Seite. Ich würde empfehlen, mit console.log(event) und stochern, was es dumps in der Konsole mit Firebug/Entwicklertools.

    jQuery

    ​$(window).click(function(e) {
    console.log(e); //then e.srcElement.className has the class
});​​​​

    Javascript

    window.onclick = function(e) {
    console.log(e); //then e.srcElement.className has the class
}​

    Probieren Sie es aus

    http://jsfiddle.net/M2Wvp/

    Bearbeiten

    Für die Klärung, die Sie nicht haben, um log-Konsole für die e.srcElement.className haben die Klasse, hoffentlich, nicht zu verwechseln jemand. Es soll zeigen, dass innerhalb der Funktion, die den Namen der Klasse.

    InformationsquelleAutor der Antwort Robert

  3. 7
    $(document).click(function(e){
    var clickElement = e.target;  //get the dom element clicked.
    var elementClassName = e.target.className;  //get the classname of the element clicked
});

    dies fördert zum klicken auf eine beliebige Stelle der Seite. wenn das element, das Sie angeklickt haben nicht der name einer Klasse, wird es wieder null oder eine leere Zeichenfolge.

    InformationsquelleAutor der Antwort rob waminal

  4. 2
    $('#ele').click(function() {
    alert($(this).attr('class'));
});

    Und hier sind alle Attribut-Funktionen.

    http://api.jquery.com/category/attributes/

    InformationsquelleAutor der Antwort Metropolis

  5. 2

    Können Sie element.className.split(/\s+/); um ein array von Klassennamen, erinnern die Elemente können mehr als eine Klasse.

    Dann können Sie Durchlaufen alle von Ihnen und finden Sie die, die Sie wollen.

    window.onclick = function(e) {
    var classList = e.srcElement.className.split(/\s+/);
    for (i = 0; i < classList.length; i++) {
       if (classList[i] === 'someClass') {
         //do something
       }
    }
}

    jQuery nicht wirklich helfen hier, aber wenn Sie müssen

    $(document).click(function(){
    var classList =$(this).attr('class').split(/\s+/);
    $.each( classList, function(index, item){
        if (item==='someClass') {
           //do something
        }
    });
});

    InformationsquelleAutor der Antwort redsquare

Schreibe einen Kommentar