Cautare in site

Articol

Curs jQuery – lectia 8 – Cuvantul cheie “this” si schimbarea textului pentru declansatorul functiei .toggle

Curs jQuery – lectia 8 – Cuvantul cheie “this” si schimbarea textului pentru declansatorul functiei .toggle

In articolul trecut am introdus actiunea .is cu ajutorul careia am ascuns si aratat informatii utilizand-o impreuna cu actiunile .show si .hide din jQuery. Deasemenea am vorbit despre actiunea .toggle, foarte utilizata de catre dezoltatorii jQuery, functie ce incorporeaza cele doua actiuni: .show si .hide.

In acest articol vom face un pas in plus in configurarea actiunii schimband textul butonului utilizat pentru realizarea actiunii .toggle in baza fazei in care se afla actiunea. Astfel cand detaliile sunt vizibile vom avea textul butonului setat pe “Ascunde Detalii” iar in momentul in care ascundem detaliile le putem arata din nou utilizand acelasi buton dar care afiseaza de aceasta data textul “Arata Detalii”. Pentru a realiza acest lucru vom utiliza actiunea .is in interiorul actiunii .toggle. In interiorul actiunii .is vom seta paramentrii “value” ai butonului ce corespund celor doua faze utilizand conditia if / else:

<div id="wrap">
<h3>Evenimentele in jQuery - Actiunea TOGGLE imbunatatita cu schimbarea textului butonului</h3>
<input type="button" id="toggle" value="Ascunde Detalii" />
<div id="detalii"><p>Detalii despre evenimentele in jQuery</p></div>
</div>
$('#toggle').click(function() {
$("#detalii").toggle();
if ($("#detalii").is(":visible")) {
$(this).val("Ascunde Detalii");
} else {
$(this).val("Arata Detalii");
}
});

Ceea ce mai vedem in exemplul de mai sus este ca am utilizat un nou cuvant in scrierea functiei, am folosit cuvantul cheie “this” pentru a indica butonul.

Cuvantul cheie “this”

In momentul in care un eveniment este generat cuvantul cheie this ne ajuta sa identificam elementul care l-a generat. Includerea acestui cuvant cheie in interiorul obiectului jQuery ne da posibilitatea sa nu repetam  numele elementului generator al event-ului. In acest caz am utilizat “this” pentru a ne referi la butonul cu id-ul #toggle. L-am utilizat pentru a ne referi la buton in cadrul conditiei if / else care seteaza valoarea acestuia in cele doua stadii.

Aici poate fi gasita si descarcata pagina DEMO.

In articolul urmator vom analiza selectorul :hidden pentru aplicarea functiei .toggle asupra unui element initial ascuns.


CUPRINS MINI-CURS JQUERY

  1. Introducere la jQuery, download / CDN si plasare in documentul HTML
  2. Alias-ul, semantica instructiunilor si inserarea lor in documentul HTML
  3. Instructiunea Document Ready in jQuery si specificarea selectorilor
  4. Selectorii :even si :odd si functia .css
  5. Proprietati multiple cu functia .css utilizand un obiect “literal”
  6. Manipularea vizibilitatii cu .addClass si .removeClass
  7. Evenimentele in jQuery, instructiunile .show / .hide sau .toogle
  8. Cuvantul cheie “this” si schimbarea textului pentru declansatorul functiei .toogle in jQuery
  9. Selectorul :hidden – aplicarea functiei .toogle asupra unui element initial ascuns
  10. Adaugarea si plasarea elementelor in DOM cu ajutorul functiilor .insertAfter si .insertBefore
  11. Adaugarea elementelor child in DOM cu ajutorul functiilor .prependTo si .appendTo


Nu sunt comentarii

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.