Egyszeri esemény a jQuery-ben

Amikor az események leváltását tanulmányoztuk a off metódussal, a következő konstrukciót használtuk:

javascript$('li').on('click', function() {
  $(this).append('!');
  $(this).off('click', func);
});

Először hozzárendeltünk egy eseménykezelő függvényt a on segítségével, majd leváltottuk a off metódussal.

A jQuery-ben van egy kényelmes metódus, a one, amely lehetővé teszi egy egyszeri esemény hozzárendelését - az csak egyszer fut le, majd automatikusan levált. Ez a metódus első paraméterként az esemény típusát fogadja, második paraméterként pedig a hozzárendelt függvényt.

A következő példát az alábbi HTML kód alapján vizsgáljuk meg:

html<ul>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
</ul>

A CSS kód így néz ki:

cssli {
  width: 100px;
  cursor: pointer;
}

Most minden egyes li elemhez hozzárendelünk egy egyszeri eseményt:

javascript$('li').one('click', function() {
  $(this).append('!');
});

Kattintsunk a lista elemeire. Amint látható, ugyanazt a hatást értük el, köszönhetően a one metódusnak.

Задание 1

Rendelj minden linkhez egy eseményt - amikor a kurzor a linkre kerül, annak szövegéhez a végéhez írd oda a link href értékét zárójelben. Az első rámutatás után váld le a linkről az eseményt, amely a href értéket adja a szöveg végéhez.

Задание 2

Minden input mezőnél érd el, hogy kiírják a saját value értéküket bármelyikre kattintáskor, de csak az első kattintáskor. Az input mező ismételt megnyomása ne váltson ki reakciót.

Задание 3

Adottak számokat tartalmazó bekezdések. Kattintáskor a bekezdésre annak tartalmaznia kell a benne lévő szám négyzetét, de csak az első kattintáskor. Dupla kattintáskor a bekezdésre a benne lévő szám megduplázódjon, de szintén csak az első alkalommal.

Задание 4

Adottak bekezdések. Érd el, hogy az első kattintáskor a bekezdés végéhez egy '!' kerüljön, de csak az első kattintáskor.