Javascript-Variable mit Jquery zum Finden von Variablen - Javascript, Jquery, HTML, CSS, Variablen

Ich machte einen Geige mit Knöpfen. Jetzt im Javascript versuche ich, jquery zu lernen, und indem ich das tue, konvertiere ich alte Geigen in jquery von Javascript, aber ich weiß wie.

Mein Problem ist, dass ich in meiner Funktion "init" nicht herausfinden kann, wie die JavaScript-Methode konvertiert wird, um ein HTML-Element mit einer in einer Variablen gespeicherten ID zu erhalten.

Alter Code in Javascript:

var but = document.getElementById("but");

Neuer Code in jQuery:

var but = $("#but");

Ich denke, das Problem ist, dass ich mit einer Javascript-Anweisung beginne, dann aber jQuery verwende. Ich weiß nicht, was ich in Bezug auf Variablen in jQuery tun soll.

Antworten:

1 für die Antwort № 1

Sie müssen hinzufügen [0] zu Ihrem jquery-Code, um das document-Element zu erhalten, aber das ist mit der jquery-Methode zum Hinzufügen von Ereignis-Listenern ziemlich sinnlos. Ich würde auch vorschlagen $("#but").mouseout(etc) oder $("#but").on("mouseout", etc).

Ich habe deine jsfiddle auf den neuesten Stand gebracht arbeiten wie erwartet, obwohl ich hier versuchen werde, eine kurze Anleitung zu geben:

Es gibt zwei Methoden zum Hinzufügen von Ereignis-Listenern, mit denen Sie sich anhand der jquery-Dokumentation vertraut machen sollten. das .on() Methode und die .(event)() Methode. Letzteres können Sie anstelle von jquery ojects hinzufügen object.(eventName)() Beispiel: Hinzufügen des Klick-Handlers zu einem Objekt: object.click(function() { console.log("executed"); });

Diese Methode ist jedoch nicht "live", sondern aktualisiert sich nicht von selbst, wenn die Elemente dynamisch hinzugefügt werden und die Ereignisse nur angehängt werden, wenn das Dokument fertig ist ($(document).ready(function() { do stuff });). Um Ereignisse an dynamisch hinzugefügte Elemente anzuhängen, benötigen wir die .on() Methode.

Nehmen Sie zum Beispiel den folgenden HTML-Code:

<div class="wrapper">
<span class="dynamically_added">stuff</span>
</div>

Um einen Ereignis-Listener an den dynamisch hinzugefügten Bereich anzuhängen, fügen Sie in Ihrer Abfrage Folgendes hinzu:

$(".wrapper").on("click", ".dynamically_added", function() {
console.log("executed");
});

Der erste Parameter von .on() ist (sind) die Veranstaltung (en). Sie können mehrere Ereignisse anhängen, indem Sie sie durch Leerzeichen trennen: .on("click hover"). Der zweite Parameter ist entweder die Funktion zuausführen oder das Zielelement. Im obigen Beispiel ist es die Spanne. Der letzte Parameter ist natürlich die auszuführende Funktion. Soweit mir bekannt ist, benötigen Sie eine anonyme Funktion, um auf die auszuführende Funktion zu verweisen, anstatt sie einfach dort zu schreiben.

Ich hoffe das hat geholfen.

---

1 für die Antwort № 2

$("#but") gibt ein jQuery-Objekt zurück, kein DOM-Objekt. Sie können entweder jQuery-Methoden dafür aufrufen oder das DOM-Objekt daraus abrufen, aber Sie können DOM-Methoden nicht direkt darauf anwenden. Wenn Sie das DOM-Objekt daraus abrufen möchten, können Sie Folgendes tun:

$("#but")[0]

Und Ihre Methode wäre:

function init() {
var but = $("#but")[0];
but.addEventListener("mouseover", butResult, false);
but.addEventListener("mouseout", reverse, false);
var button = $("#button")[0];
button.addEventListener("mouseover", buttonResult, false);
button.addEventListener("mouseout", reverse, false);
}

Anstelle von nativen DOM-Methoden können Sie auch jQuery-Methoden für das jQuery-Objekt verwenden.

function init() {
$("#but").on("mouseover", butResult).on("mouseout", reverse);
$("#button").on("mouseover", buttonResult).on("mouseout", reverse);
}

---

0 für die Antwort № 3

Nicht sicher, ob ich dich verstehe? Vollständig, aber ist es das, wonach Sie ungefähr suchen:

var b1 = document.getElementById("button");
var b2 = $(b1);
b2.click( function(){
alert("hi");
})

---