2012-01-06 19 views
8

Jaki jest najlepszy sposób, aby dowiedzieć się, co obecnie jest równe w jQuery?

Na przykład nie ma zbytniej pomocy.

Powodem, dla którego pytam, jest to, że fragment kodu nie wykonuje aktualnie tego, co powinien, po przeniesieniu kodu do funkcji.

Poniższy fragment jest teraz w funkcji, a $ (this) teraz wydaje się odnosić do DOMWindow.

if($(this).hasClass('open')) 
    { 
    alert('I should be closed'); 
    $(this).removeClass('open').addClass('closed'); 
    $(this).parents('article').css('border', '1px solid red').animate({'width': '212px'}, 100, "linear", function() { 
    run_masonry(); 
    }); 
    } 
    else 
    { 
    alert('I should be open'); 
    $(this).removeClass('closed').addClass('open'); 
    $(this).parents('article').css('border', '1px solid blue').animate({'width': '646px'}, 100, "linear", function() { 
    run_masonry(); 
    }); 
} 

Jak zachować, że $ (this) jest oryginalnym kliknięciem elementu?

Odpowiedz

22

Jaki jest najlepszy sposób, aby dowiedzieć się, co obecnie jest równe w jQuery?

Logując się do konsoli ulubionej javascript narzędzie do debugowania (lub paska narzędzi jak deweloper FireBug Chrome dla przykładu):

console.log($(this)); 

który zwróci jQuery owinięty obiekt. Jeśli chcesz wiedzieć więcej o natywnej obiektu można użyć:

console.log(this); 

Jeśli robisz JavaScript rozwoju należy użyć javascript narzędzie do debugowania. alert nie jest takim narzędziem.


Teraz, po zaktualizowaniu pytanie z jakiegoś źródła kodu wydaje się, że używasz $(this) w zasięgu globalnym. Następnie odniesie się do obiektu window. Jeśli chcesz, aby odnieść się do jakiegoś elementu klikniętego czy coś będzie trzeba najpierw subskrybować .Kliknij imprezy:

$('.someSelector').click(function() { 
    // here $(this) will refer to the original element that was clicked. 
}); 

lub jeśli chciał uzewnętrznić ten kod w osobnej funkcji:

function foo() { 
    // here $(this) will refer to the original element that was clicked. 
} 

$('.someSelector').click(foo); 

czyli

function foo(element) { 
    // here $(element) will refer to the original element that was clicked. 
} 

$('.someSelector').click(function() { 
    foo(this); 
}); 
+0

Czy mimo to sprowadzić która zwraca wiele danych –

+0

@CraigWard, tak, użyj 'console.log (this);' zalogować tylko th?. e obiekt natywny, a nie '$ (this)'. –

+0

@CraigWard co chciałbyś zawęzić? Żałuję, że to nie jest $ (this) .attributesThatIWantToSee() ' – Connell

1

z ruchomymi kod do funkcji zwykle zakres zmian w kodzie. Tak więc "to" nie będzie już odnosić się do oryginalnego obiektu, ale raczej do nowego (lub globalnego obiektu "okna"). Jeśli pokażesz nam swój kod, będziemy w stanie zidentyfikować problem.

+0

To brzmi jak problem. Zwraca DOMWindow. Czy istnieje sposób, aby zachować $ (this), gdy w funkcji? –

+0

Wiele sposobów, ale to zależy od tego, co robisz źle ... –

+0

Zaktualizowałem pytanie, aby dodać trochę kodu –

0

Podejrzewam, że można zrobić coś takiego:

$('#element').click(function() { 
    clickHandler(); 
}); 

W tym przypadku clickHandler zostanie wywołana w kontekście obiektu window. Aby zachować odpowiedni kontekst prostu zmienić swój kod do:

$('#element').click(clickHandler); 
0

Jeśli chcesz sprawdzić, co jest przekazywane wokół można użyć moją wersję lub wersję PRINZHORN dnia jquerylog.Powinno to pomóc w identyfikacji krok po kroku, co się dzieje:

http://www.jquerylog.com/https://github.com/fmsf/jQueryLog

przypadku połączenia jak:

$("#foo").parents(".t1").next().prev().parent().find(".t2:last .t4:last").text("test"); 

Dostaniesz wyjście takiego (który identyfikuje div w każdym kroku :

$('#foo'): [<div id="foo" class="t3"></div>] 
    parents('.t1'): [ <div class="t1">…</div> ] 
     next(undefined): [ <div class="t1">…</div> ] 
      prev(undefined): [ <div class="t1">…</div> ] 
       parent(undefined): [ <body>…</body> ] 
        find('.t2:last .t4:last'): [<div class="t4">teste</div>]