Sehr einfache jQuery Verwendung: mit $ (this) oder var

Question

Dies ist meine erste Verwendung von jQuery. Ich möchte nur eine schnelle Lösung für die folgenden:

Es ist sehr einfach; Wenn div # a1.toolbot angeklickt wird, wird div # a1p angezeigt. Wenn # a2.toolbotbut angeklickt wird, wird div # a2p angezeigt. Wenn # b2.toolbotbut geklickt wird, div # b2p gezeigt, etc etc. Also das indivdual jquery sieht wie folgt aus:

$('#a1.toolbotbut').click(function() { 
    $('#a1p.overlay').fadeIn('slow'); 
    }); 

und

$('#a2.toolbotbut').click(function() { 
    $('#a2p.overlay').fadeIn('slow'); 
    }); 

Können Sie mir sagen, wie $ verwenden (this) oder var, um die div-ID des ausgewählten auszuwählen und diese in $ ('... p.overlay') einzufügen, damit ich zwei Codezeilen für die gesamte Funktion verwenden kann. Mach dir keine Sorgen über das Verstecken oder Markieren von aktiv ... nur die grundlegende Technik, die ich hier brauche.

Vielen Dank.

Answer 1

So:

$('.toolbotbut').click(function() { 
    var id = $(this).attr('id'); 
    var overlayId = '#' + id + 'p.overlay'; 
    $(overlayId).fadeIn('slow'); 
}); 

Answer 2

this Die Variable bezieht sich auf das Objekt, das die Funktion() in dem Klickereignis aufruft (d #a1.toolbotbut). Wenn Sie innerhalb der Funktion auf this verweisen, beziehen Sie sich eigentlich auf #a1.toolbotbut. Wenn Sie this in $() wie $(this) umbrechen, haben Sie #a1.toolbotbut in einem jQuery-Objekt gemacht.

jQuery Objekte haben die attr Methode, die ein Attribut oder Eigenschaft zurückkehren wird, so dass Sie so etwas tun:

var div_id = $(this).attr(); // returns "a1" 

Ich hoffe, ich verstanden, was Sie fragen und dass dies hilft. Viel Glück.