Xác định $ (điều này) trong jQuery

Whats cách tốt nhất để tìm hiểu xem $(this) hiện bằng bằng jQuery là gì?

Ví dụ: không có nhiều trợ giúp.

Lý do tôi hỏi là một đoạn mã hiện không làm những gì cần làm sau khi tôi đã chuyển mã vào một hàm.

Đoạn trích bên dưới hiện đang ở trong một hàm và $ (this) bây giờ dường như đề cập đến 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(); 
    }); 
}

Làm cách nào để giữ thành $ (đây) là yếu tố được nhấp gốc?

Nguồn

2012-01-06 Craig Ward

Whats cách tốt nhất để tìm hiểu xem $(this) hiện bằng bằng jQuery là gì?

Bằng cách đăng nhập nó vào giao diện điều khiển của công cụ gỡ lỗi javascript yêu thích của bạn (như FireBug hoặc Chrome trên thanh công cụ nhà phát triển ví dụ):

console.log($(this));

mà sẽ trả về một jQuery bọc đối tượng. Nếu bạn muốn biết thêm về đối tượng gốc bạn có thể sử dụng:

console.log(this);

Nếu bạn đang phát triển javascript, bạn nên sử dụng công cụ gỡ lỗi javascript. alert không phải là công cụ như vậy.

Bây giờ bạn đã cập nhật câu hỏi của bạn với một số mã nguồn có vẻ như bạn đang sử dụng $(this) trong phạm vi toàn cầu. Sau đó, nó sẽ tham chiếu đến đối tượng window. Nếu bạn muốn nó để đề cập đến một số yếu tố nhấp hoặc một cái gì đó bạn sẽ phải đầu tiên đăng ký vào các sự kiện .click:

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

hoặc nếu bạn muốn ra bên ngoài mã này trong một chức năng riêng biệt:

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

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

hoặc:

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

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

Nguồn

2012-01-06 10:29:52

liệu có cách nào để thu hẹp nó xuống mà trả về rất nhiều dữ liệu –

@CraigWard, vâng, sử dụng 'console.log (this);' để đăng nhập chỉ th?. e đối tượng gốc và không phải '$ (this)'. –

@CraigWard bạn muốn thu hẹp điều gì? Tôi ước nó là '$ (this) .attributesThatIWantToSee()' – Connell

Với việc di chuyển mã vào một hàm thường là phạm vi của mã thay đổi. Vì vậy, "điều này" sẽ không còn đề cập đến đối tượng ban đầu mà là một đối tượng mới (hoặc đối tượng "cửa sổ" toàn cục). Nếu bạn cho chúng tôi thấy mã của bạn, chúng tôi sẽ có thể xác định vấn đề.

Nguồn

2012-01-06 10:34:30 devnull69

Điều đó nghe có vẻ giống như vấn đề. Nó trả về DOMWindow. Có cách nào để giữ $ (this) khi ở trong hàm không? –

Rất nhiều cách, nhưng nó phụ thuộc vào những gì bạn đang làm sai ... –

Tôi đã cập nhật câu hỏi để bao gồm một số mã –

Tôi nghi ngờ rằng bạn làm điều gì đó như thế này:

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

Trong trường hợp này clickHandler sẽ được gọi trong bối cảnh đối tượng Window. Để duy trì ngữ cảnh chính xác, chỉ cần thay đổi mã của bạn thành:

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

Nguồn

2012-01-06 10:51:43 dfsq

Nếu bạn muốn kiểm tra những gì đang được truyền xung quanh, bạn có thể sử dụng phiên bản jquerylog hoặc phiên bản prinzhorn của tôi.Nó sẽ giúp bạn xác định từng bước những gì đang xảy ra:

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

Đối với một cuộc gọi như:

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

Bạn sẽ nhận được một sản lượng như thế này (trong đó xác định các div trong mỗi bước :

$('#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>]

Nguồn

2012-01-06 13:00:23 fmsf

Xác định $ (điều này) trong jQuery

Trả lời

Các vấn đề liên quan