Milloin jQueryn kloonitoiminto on hyödyllinen?

Yksi kirjaston oppimisen haasteista (oli se sitten ohjelmointikielen mukana tuleva funktioiden vakiokirjasto tai kolmannen osapuolen projekti) on kaksiosainen:

1. käytettävissä olevien toimintojen oppiminen,
2. oppia käyttämään mainittuja toimintoja.

Ja todellakin, joskus jopa mainittujen funktioiden käytön oppiminen ei ole niin vaikeaa – se on tietää, milloin tiettyä funktiota tulee käyttää koodin minimoimiseksi ja silti saavuttaa projektin tavoitteet.

jQueryn kloonitoiminto

Yksi esimerkki, joka tulee mieleen, on jQueryn kloonitoiminnon käyttö. Toiminnon määritelmä on yksinkertainen:

.clone()-menetelmä kopioi täsmäävien elementtien joukosta syvän kopion, mikä tarkoittaa, että se kopioi sovitetut elementit sekä kaikki niiden jälkeläiset elementit ja tekstisolmut.

Funktiossa on hienoa, että se voi myös luoda "matalan" kopion funktiosta, mikä tarkoittaa, että voit kopioida elementit ilman tapahtumakäsittelijöitä, alielementtejä ja niin edelleen.

Tarpeistasi riippuen toinen on arvokkaampi kuin toinen. Mutta tässä viestissä oletetaan, että haemme syvää kopiota.

1 Mahdollinen käyttötapaus

Oletetaan, että sivulla on joukko kuvia ja jokaiselle kuvalle on lisättävä jokin tapahtumakäsittelijä, jotta kun kuvaa napsautetaan, jotain tapahtuu.

• ehkä modaalinen valintaikkuna tulee näkyviin,
• ehkä jotain lähetetään palvelimelle asynkronisen pyynnön kautta,
• ehkä sivun esitystapaa on muutettava,
• jne.

Minä en tiedä. Olipa tapauksesi mikä tahansa, oletetaan, että sinulla on kuva tai joukko kuvia ja sinun on avattava modaalinen valintaikkuna, kun sitä napsautetaan.

2 Koodin asettaminen

Tätä varten meidän on tehtävä useita asioita:

1. lisää kuviin mukautettu attribuutti, jotta voimme liittää asianmukaiset tapahtumakäsittelijät,
2. määritä osio, jossa on merkintä, jonka haluamme näyttää tietyllä HTML-kappaleella,
3. käyttämällä kloonia hyödyntämään hyödyntämään osittaista, jonka olemme kirjoittaneet ja monistaneet sen tarpeen mukaan.

Vaihe 1

Jos työskentelet WordPressin kanssa ja etsit, miten voit lisätä mukautettuja kuvaattribuutteja, voit katsoa tämän ohjeen tässä viestissä.

Vaihe 2

Osion luominen on yksinkertaista. Koodi voi olla yhtä yksinkertainen kuin seuraava katkelma :

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

Ja kyllä, voit pukea sen hieman CSS:llä ja lisätä mukautettua koodia johonkin elementtiin PHP:n avulla, mutta tämä kattaa ehdottoman perusasiat.

Vaihe 3

Oletetaan nyt, että jokaiselle sivulla olevalle kuvalle (jossa on mukautettu attribuutti, kuten data-type="acme” ), haluamme liittää kopion yllä olevasta elementistä sivulle, joka liittyy jokaiseen sivulla olevaan kuvaan.

Tätä varten meidän on tiedettävä:

1. kun elementtiä napsautetaan,
2. se on pääelementti,
3. ja kuinka elementti liitetään kloonimenetelmällä.

Ensinnäkin haluamme havaita, milloin tiettyä kuvaa napsautetaan. Tätä varten voimme käydä läpi kaikki sivulla olevat kuvat, jotta voimme liittää mukautetun tapahtumakäsittelijän:

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

  // ...

});

Sitten, kun kuvaa napsautetaan, löydämme napsautetun kuvan pääelementin (ja sitten suurin osa työstä tapahtuu).

Toisin sanoen otamme kopion elementistä aiemmin viestissä, kloonaamme sen ja lisäämme sen säilöön:

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 sitten voimme työskennellä jokaisen kanssa itsenäisesti.

Muutama gotchas

Kun kloonaat elementtejä, sinun on muistettava muutama seikka (jotka on mainittu edellä). Erityisesti:

• muista, että saatat tarvita kloonauselementtejä eri tavalla tapahtumakäsittelijän mukaan,
• saatat joutua luomaan mukautetut tunnukset tietylle elementille ennen sen liittämistä sivulle,
• ehkä elementtiä on vaihdettava, kun jotain napsautetaan,
• ja niin edelleen.

On monia tapoja käsitellä kloonattua elementtiä, mutta aina kun teet niin, varmista, että kun kloonaat elementin, tunnistat ja hallitset tapahtumia oikein, jotta et saa virheellisiä tuloksia.