JavaScript zmienna używająca jquery do znalezienia zmiennej - javascript, jquery, html, css, variables

Zrobiłem skrzypce z przyciskami. Teraz w javascript próbuję nauczyć się jquery i robiąc to, przekształcam stare skrzypce w jquery z javascript, ale wiem jak.

Mój problem polega na tym, że w mojej funkcji o nazwie init nie mogę dowiedzieć się, jak przekonwertować sposób javascript na uzyskanie elementu HTML z identyfikatorem przechowywanym w zmiennej.

Stary kod w javascript:

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

Nowy kod w jQuery:

var but = $("#but");

Myślę, że problem polega na tym, że zaczynam od instrukcji javascript, ale potem używam jQuery. Nie wiem, co robić w zakresie zmiennych w jQuery.

Odpowiedzi:

1 dla odpowiedzi № 1

Musisz dodać [0] do kodu jquery, aby uzyskać element dokumentu, ale jest to raczej bezcelowe w przypadku metody jquery dodawania detektorów zdarzeń. Sugerowałbym albo $("#but").mouseout(etc) lub $("#but").on("mouseout", etc).

Zaktualizowałem twój jsfiddle do działa zgodnie z oczekiwaniami, ale postaram się tutaj krótko napisać:

Istnieją dwie metody dodawania detektorów zdarzeń, z którymi powinieneś zapoznać się w dokumentacji jquery; .on() metoda i .(event)() metoda. Ten ostatni możesz dodać do ekwipunku jquery zamiast object.(eventName)() na przykład dodanie modułu obsługi kliknięć do obiektu: object.click(function() { console.log("executed"); });

Ta metoda nie jest jednak „na żywo”, nie aktualizuje się sama, jeśli elementy są dodawane dynamicznie, a zdarzenia są dołączane tylko wtedy, gdy dokument jest gotowy ($(document).ready(function() { do stuff });). Aby dołączyć zdarzenia do dynamicznie dodawanych elementów, potrzebujemy .on() metoda.

Weźmy na przykład następujący HTML:

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

Aby dołączyć detektor zdarzeń do dynamicznie dodanego zakresu, w jquery dodaj następujące elementy:

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

Pierwszy parametr .on() jest (są) zdarzeniem. Możesz dołączyć wiele zdarzeń, rozdzielając je spacjami: .on("click hover"). Drugi parametr to albo funkcja dowykonać lub element docelowy. W przypadku powyższego przykładu jest to rozpiętość. Ostatnim parametrem jest oczywiście funkcja do wykonania. O ile mi wiadomo, musisz mieć anonimową funkcję, aby odwoływać się do funkcji do wykonania, zamiast po prostu ją tam pisać.

Mam nadzieję, że to pomogło.

---

1 dla odpowiedzi nr 2

$("#but") zwraca obiekt jQuery, a nie obiekt DOM. Możesz albo wywołać na nim metody jQuery, albo możesz pobrać z niego obiekt DOM, ale nie możesz bezpośrednio na nim używać metod DOM. Jeśli chcesz z niego uzyskać obiekt DOM, możesz go uzyskać za pomocą:

$("#but")[0]

I twoja metoda byłaby taka:

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);
}

Lub zamiast używać rodzimych metod DOM, możesz użyć metod jQuery na obiekcie jQuery.

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

---

0 dla odpowiedzi № 3

Nie jesteś pewien, czy cię rozumiem? całkowicie, ale czy właśnie tego z grubsza szukasz:

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

---