{"id":229988,"date":"2022-11-15T14:02:00","date_gmt":"2022-11-15T11:02:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229988"},"modified":"2022-11-15T14:03:18","modified_gmt":"2022-11-15T11:03:18","slug":"milloin-jqueryn-kloonitoiminto-on-hyoedyllinen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/milloin-jqueryn-kloonitoiminto-on-hyoedyllinen\/","title":{"rendered":"Milloin jQueryn kloonitoiminto on hy\u00f6dyllinen?"},"content":{"rendered":"\n<p>Yksi kirjaston oppimisen haasteista (oli se sitten ohjelmointikielen mukana tuleva funktioiden vakiokirjasto tai kolmannen osapuolen projekti) on kaksiosainen:<\/p>\n<ol>\n<li>k\u00e4ytett\u00e4viss\u00e4 olevien toimintojen oppiminen,<\/li>\n<li>oppia k\u00e4ytt\u00e4m\u00e4\u00e4n mainittuja toimintoja.<\/li>\n<\/ol>\n<p>Ja todellakin, joskus jopa mainittujen funktioiden k\u00e4yt\u00f6n oppiminen ei ole niin vaikeaa \u2013 se on tiet\u00e4\u00e4, milloin tietty\u00e4 funktiota tulee k\u00e4ytt\u00e4\u00e4 koodin minimoimiseksi ja silti saavuttaa projektin tavoitteet.<\/p>\n<h2>jQueryn kloonitoiminto<\/h2>\n<p>Yksi esimerkki, joka tulee mieleen, on jQueryn kloonitoiminnon <strong>k\u00e4ytt\u00f6<\/strong>. <a href=\"https:\/\/api.jquery.com\/clone\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Toiminnon m\u00e4\u00e4ritelm\u00e4<\/a> on yksinkertainen:<\/p>\n<blockquote>\n<p>.clone()-menetelm\u00e4 kopioi t\u00e4sm\u00e4\u00e4vien elementtien joukosta syv\u00e4n kopion, mik\u00e4 tarkoittaa, ett\u00e4 se kopioi sovitetut elementit sek\u00e4 kaikki niiden j\u00e4lkel\u00e4iset elementit ja tekstisolmut.<\/p>\n<\/blockquote>\n<p>Funktiossa on hienoa, ett\u00e4 se voi my\u00f6s luoda &quot;matalan&quot; kopion funktiosta, mik\u00e4 tarkoittaa, ett\u00e4 voit kopioida elementit ilman tapahtumak\u00e4sittelij\u00f6it\u00e4, alielementtej\u00e4 ja niin edelleen.<\/p>\n<p>Tarpeistasi riippuen toinen on arvokkaampi kuin toinen. Mutta t\u00e4ss\u00e4 viestiss\u00e4 oletetaan, ett\u00e4 haemme syv\u00e4\u00e4 kopiota.<\/p>\n<h3>1 Mahdollinen k\u00e4ytt\u00f6tapaus<\/h3>\n<p>Oletetaan, ett\u00e4 sivulla on joukko kuvia ja jokaiselle kuvalle on lis\u00e4tt\u00e4v\u00e4 jokin tapahtumak\u00e4sittelij\u00e4, jotta kun kuvaa napsautetaan, jotain tapahtuu.<\/p>\n<ul>\n<li>ehk\u00e4 modaalinen valintaikkuna tulee n\u00e4kyviin,<\/li>\n<li>ehk\u00e4 jotain l\u00e4hetet\u00e4\u00e4n palvelimelle asynkronisen pyynn\u00f6n kautta,<\/li>\n<li>ehk\u00e4 sivun esitystapaa on muutettava,<\/li>\n<li>jne.<\/li>\n<\/ul>\n<p>Min\u00e4 en tied\u00e4. Olipa tapauksesi mik\u00e4 tahansa, oletetaan, ett\u00e4 sinulla on kuva tai joukko kuvia ja sinun on avattava modaalinen valintaikkuna, kun sit\u00e4 napsautetaan.<\/p>\n<h3>2 Koodin asettaminen<\/h3>\n<p>T\u00e4t\u00e4 varten meid\u00e4n on teht\u00e4v\u00e4 useita asioita:<\/p>\n<ol>\n<li>lis\u00e4\u00e4 kuviin mukautettu attribuutti, jotta voimme liitt\u00e4\u00e4 asianmukaiset tapahtumak\u00e4sittelij\u00e4t,<\/li>\n<li>m\u00e4\u00e4rit\u00e4 osio, jossa on merkint\u00e4, jonka haluamme n\u00e4ytt\u00e4\u00e4 tietyll\u00e4 HTML-kappaleella,<\/li>\n<li>k\u00e4ytt\u00e4m\u00e4ll\u00e4 <strong>kloonia<\/strong> hy\u00f6dynt\u00e4m\u00e4\u00e4n hy\u00f6dynt\u00e4m\u00e4\u00e4n osittaista, jonka olemme kirjoittaneet ja monistaneet sen tarpeen mukaan.<\/li>\n<\/ol>\n<h4>Vaihe 1<\/h4>\n<p>Jos ty\u00f6skentelet WordPressin kanssa ja etsit, miten voit lis\u00e4t\u00e4 mukautettuja kuvaattribuutteja, voit katsoa t\u00e4m\u00e4n ohjeen <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/mukautettujen-wordpress-kuvamaeaeritteiden-lisaeaeminen\/\" title=\"t\u00e4ss\u00e4 viestiss\u00e4\">t\u00e4ss\u00e4 viestiss\u00e4<\/a>.<\/p>\n<h4>Vaihe 2<\/h4>\n<p>Osion luominen on yksinkertaista. Koodi voi olla yht\u00e4 yksinkertainen kuin <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-00-sample-markup-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">seuraava katkelma<\/a> :<\/p>\n<pre><code>&lt;p class=\"acme-element\"&gt;\n    &lt;span&gt;Acme&lt;\/span&gt;\n&lt;\/p&gt;&lt;!--- .acme-element --&gt;<\/code><\/pre>\n<p>Ja kyll\u00e4, voit pukea sen hieman CSS:ll\u00e4 ja lis\u00e4t\u00e4 mukautettua koodia johonkin elementtiin PHP:n avulla, mutta t\u00e4m\u00e4 kattaa ehdottoman perusasiat.<\/p>\n<h4>Vaihe 3<\/h4>\n<p>Oletetaan nyt, ett\u00e4 jokaiselle sivulla olevalle kuvalle (jossa on mukautettu attribuutti, kuten <strong>data-type=&quot;acme&#8221;<\/strong> ), haluamme liitt\u00e4\u00e4 kopion yll\u00e4 olevasta elementist\u00e4 sivulle, joka liittyy jokaiseen sivulla olevaan kuvaan.<\/p>\n<p>T\u00e4t\u00e4 varten meid\u00e4n on tiedett\u00e4v\u00e4:<\/p>\n<ol>\n<li>kun elementti\u00e4 napsautetaan,<\/li>\n<li>se on p\u00e4\u00e4elementti,<\/li>\n<li>ja kuinka elementti liitet\u00e4\u00e4n <strong>kloonimenetelm\u00e4ll\u00e4<\/strong>.<\/li>\n<\/ol>\n<p>Ensinn\u00e4kin haluamme havaita, milloin tietty\u00e4 kuvaa napsautetaan. T\u00e4t\u00e4 varten voimme k\u00e4yd\u00e4 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-01-loop-through-images-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l\u00e4pi kaikki<\/a> sivulla olevat kuvat, jotta voimme liitt\u00e4\u00e4 mukautetun tapahtumak\u00e4sittelij\u00e4n:<\/p>\n<pre><code>\/\/ Loop through each of the image with the custom data-types on the page.\n$('img[data-type=\"acme\"]').each(function() {\n\n  \/\/ ...\n\n});<\/code><\/pre>\n<p>Sitten, kun kuvaa napsautetaan, l\u00f6yd\u00e4mme napsautetun kuvan p\u00e4\u00e4elementin (ja sitten <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-02-find-parent-elements-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">suurin osa ty\u00f6st\u00e4<\/a> tapahtuu).<\/p>\n<p>Toisin sanoen otamme kopion elementist\u00e4 aiemmin viestiss\u00e4, kloonaamme sen ja lis\u00e4\u00e4mme sen s\u00e4il\u00f6\u00f6n:<\/p>\n<pre><code>var $this, $parent, $clone;\n\n\/\/ Loop through each of the image with the custom data-types on the page.\n$('img[data-type=\"acme\"]').each(function() {\n\n  $this = $(this);\n  $(this).on('click', function() {\n\n    \/\/ Reference the parent of the image that was clicked and clone the element.\n    $parent = $this.parent();\n    $clone  = $('.acme-element').clone(true);\n\n    \/\/ Next, append the cloned element to the parent.\n    $parent.append($clone);\n\n  });\n});<\/code><\/pre>\n<p>Ja sitten voimme ty\u00f6skennell\u00e4 jokaisen kanssa itsen\u00e4isesti.<\/p>\n<h2>Muutama gotchas<\/h2>\n<p>Kun kloonaat elementtej\u00e4, sinun on muistettava muutama seikka (jotka on mainittu edell\u00e4). Erityisesti:<\/p>\n<ul>\n<li>muista, ett\u00e4 saatat tarvita kloonauselementtej\u00e4 eri tavalla tapahtumak\u00e4sittelij\u00e4n mukaan,<\/li>\n<li>saatat joutua luomaan mukautetut tunnukset tietylle elementille ennen sen liitt\u00e4mist\u00e4 sivulle,<\/li>\n<li>ehk\u00e4 elementti\u00e4 on vaihdettava, kun jotain napsautetaan,<\/li>\n<li>ja niin edelleen.<\/li>\n<\/ul>\n<p>On monia tapoja k\u00e4sitell\u00e4 kloonattua elementti\u00e4, mutta aina kun teet niin, varmista, ett\u00e4 kun <strong>kloonaat<\/strong> elementin, tunnistat ja hallitset tapahtumia oikein, jotta et saa virheellisi\u00e4 tuloksia.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Esimerkki k\u00e4ytt\u00f6tapauksesta, milloin jQueryn kloonitoiminto on hy\u00f6dyllinen ja kuinka sit\u00e4 voidaan soveltaa tosiel\u00e4m\u00e4ss\u00e4 kuvien, s\u00e4il\u00f6jen, tapahtumien ja muiden kanssa.<\/p>\n","protected":false},"author":1,"featured_media":165590,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[730,719,895,843],"tags":[1166],"class_list":["post-229988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-5","category-kehittaejae","category-koodi","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=229988"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229988\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/165590"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=229988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=229988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=229988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}