nhắm mục tiêu $ $ trước này

Question

Làm cách nào để nhắm mục tiêu $ this (từ ngữ cảnh 'mỗi') từ bên trong hàm 'click'. Tôi muốn loại bỏ các phần tử .parents(). Find() khó xử.

$('.layout.responsive').each(function() { 
    $('.area.optional', this).before('<a href="#" class="toggle_responsive" onClick="return false">Show details</p>').hide(); 
    $('.toggle_responsive', this).click(function() { 
     $(this).parents('.layout.responsive').find('.area.optional').toggle(); 
    }); 
}); 

Answer 1

Giải pháp là tất nhiên cũng giống như mọi người khác ở đây, nhưng tôi nghĩ rằng sử dụng cú pháp này là rất sạch và sẽ thực hiện tương tự như mã bạn đang sử dụng ngay bây giờ.

$('.layout.responsive').each(function() { 
    var ar = $(this).find('.area.optional').hide(), 
     showDetail = $('<a />', { 
     href: '#', 
     class: 'toggle_responsive', 
     text: 'Show details', 
     click: function(){ 
      ar.toggle(); 
      return false; 
     }}).insertBefore(ar); 
}); 

Thay vì chèn trong một chuỗi HTML, chúng ta có thể sử dụng cú pháp mới được giới thiệu trong jQuery 1,4 để làm điều này nhiều hơn nữa sạch, và không có xử lý sự kiện inline lộn xộn bạn đang sử dụng ngay bây giờ.

Answer 2

Bạn chỉ có thể lưu trữ nó trong một biến:

$('.layout.responsive').each(function() { 
    var $elem = $('.area.optional', this).before('<a href="#" class="toggle_responsive">Show details</p>').hide(); 
    $('.toggle_responsive', this).click(function(e) { 
     e.preventDefault(); 
     $elem.toggle(); 
    }); 
}); 

Cũng lưu ý các cuộc gọi e.preventDefault(); mà làm khá nhiều những gì onclick="return false;" bạn đã làm nhưng theo một cách sạch hơn nhiều.

Answer 3

Save nó trong một tên (không đặc biệt) biến:

$('.layout.responsive').each(function() { 
    var area = $('.area.optional', this).before('<a href="#" class="toggle_responsive" onClick="return false">Show details</p>').hide(); 
    $('.toggle_responsive', this).click(function() { 
     $(area).toggle(); 
    }); 
});