target precedente $ this

Question

Come targetizzo $ this (da 'each' context) dalla funzione 'click' all'interno. Voglio rimuovere il codice awkward .parents(). Find().

$('.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

La soluzione è, naturalmente, lo stesso di chiunque altro qui, ma penso che utilizzando questa sintassi è molto più pulito e compirà la stessa il codice che stai usando adesso.

$('.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); 
}); 

Invece di inserire in una stringa HTML, si può utilizzare la nuova sintassi introdotta in jQuery 1.4 per fare questo molto più pulito, e senza il gestore di eventi in linea disordinato che si sta utilizzando al momento.

Answer 2

Si può semplicemente memorizzare in una variabile:

$('.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(); 
    }); 
}); 

Da notare anche la e.preventDefault(); chiamata che fa più o meno ciò che il vostro onclick="return false;" ha fatto, ma in un modo molto più pulito.

Answer 3

salvarla in una variabile di nome (non speciale):

$('.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(); 
    }); 
});