Millal on jQuery kloonifunktsioon kasulik?

Üks raamatukogu õppimise väljakutsetest (olgu see siis programmeerimiskeelega kaasas olev standardsete funktsioonide kogu või kolmanda osapoole projekt) on kahekordne:

1. saadaolevate funktsioonide õppimine,
2. õppida, kuidas nimetatud funktsioone kasutada.

Ja tõesti, mõnikord pole isegi nende funktsioonide kasutamise õppimine nii raske – see on teadmine, millal kasutada antud funktsiooni, et aidata koodi minimeerida, saavutades samas projekti eesmärgid.

jQuery kloonimisfunktsioon

Üks näide, mis meelde tuleb, on jQuery kloonimisfunktsiooni kasutamine. Funktsiooni määratlus on lihtne:

Meetod .clone() teeb sobivate elementide komplekti sügava koopia, mis tähendab, et see kopeerib sobitatud elemendid ning kõik nende järglased elemendid ja tekstisõlmed.

Funktsiooni hea külg on see, et see võib luua funktsioonist ka "madala" koopia, mis tähendab, et saate elemente kopeerida ilma sündmuste töötlejate, alamelementide ja muuta.

Sõltuvalt teie vajadustest on üks väärtuslikum kui teine. Kuid selle postituse puhul eeldage, et me tahame sügavat koopiat.

1 Võimalik kasutusjuht

Oletame, et teil on lehel piltide komplekt ja iga pildi jaoks peate lisama sündmuste töötleja, et pildil klõpsamisel midagi juhtuks.

• võib-olla ilmub modaalne dialoog,
• võib-olla saadetakse midagi serverisse asünkroonse päringu kaudu,
• võib-olla tuleb lehe esitusviisi muuta,
• jne.

ma ei tea. Olgu teie juhtum mis tahes, oletame, et teil on pilt või piltide komplekt ja peate kuvama modaalse dialoogi, kui sellel klõpsate.

2 Koodi seadistamine

Selleks peame tegema mitmeid asju.

1. lisage piltidele kohandatud atribuut, et saaksime lisada õiged sündmuste töötlejad,
2. seadistada osa, millel on märgistus, mida tahame antud HTML-i tükiga kuvada,
3. Klooni kasutamine võimendamiseks kasutage osa, mille oleme kirjutanud ja vajaduse korral dubleerinud.

Samm 1

Kui töötate WordPressiga ja otsite, kuidas lisada kohandatud pildiatribuute, näete selles postituses õpetust, kuidas seda teha .

2 samm

Osalise loomine on lihtne. Kood võib olla sama lihtne kui järgmine väljavõte :

<p class="acme-element">
    <span>Acme</span>
</p><!--- .acme-element -->

Ja jah, võite selle kaunistada veidi CSS-iga ja lisada ühele elemendile kohandatud koodi, kasutades PHP-d, kuid see hõlmab absoluutseid põhitõdesid.

3 samm

Oletame nüüd, et iga lehel oleva pildi jaoks (kohandatud atribuudiga nagu data-type="acme”) tahame lisada ülaltoodud elemendi koopia lehele, mis on seotud iga lehe kujutisega.

Selleks peame teadma:

1. kui elemendil klõpsatakse,
2. see on põhielement,
3. ja kuidas elementi kloonimismeetodi abil lisada.

Nii et kõigepealt tahame tuvastada, millal antud pildil klõpsatakse. Selleks saame läbi vaadata kõik lehel olevad pildid, et saaksime lisada kohandatud sündmuste töötleja:

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  // ...

});

Seejärel, kui pildil klõpsatakse, leiame pildi emaelemendi, millel klõpsati (ja siis toimub suurem osa tööst ).

See tähendab, et teeme elemendi koopia postituse alguses, kloonime selle ja lisame konteinerisse:

var $this, $parent, $clone;

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  $this = $(this);
  $(this).on('click', function() {

    // Reference the parent of the image that was clicked and clone the element.
    $parent = $this.parent();
    $clone  = $('.acme-element').clone(true);

    // Next, append the cloned element to the parent.
    $parent.append($clone);

  });
});

Ja siis saame igaühega iseseisvalt töötada.

Paar gotchat

Elementide kloonimisel peate meeles pidama mõnda asja (mida on eespool mainitud). Täpsemalt:

• pidage meeles, et olenevalt sündmusekäsitlejast võite vajada kloonielemente erinevalt,
• peate võib-olla looma konkreetse elemendi jaoks kohandatud ID-d, enne kui lisate selle lehele,
• võib-olla tuleb mõnda elementi vahetada, kui midagi klõpsatakse,
• ja nii edasi.

Kloonitud elemendi käsitlemiseks on mitmeid viise, kuid alati veenduge, et  elemendi kloonimisel tuvastaksite ja haldaksite sündmusi õigesti, et te ei saaks ebaühtlasi tulemusi.