{"id":229428,"date":"2022-11-15T14:35:00","date_gmt":"2022-11-15T11:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229428"},"modified":"2022-11-15T14:38:18","modified_gmt":"2022-11-15T11:38:18","slug":"millal-on-jquery-kloonifunktsioon-kasulik","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/millal-on-jquery-kloonifunktsioon-kasulik\/","title":{"rendered":"Millal on jQuery kloonifunktsioon kasulik?"},"content":{"rendered":"\n<p>\u00dcks raamatukogu \u00f5ppimise v\u00e4ljakutsetest (olgu see siis programmeerimiskeelega kaasas olev standardsete funktsioonide kogu v\u00f5i kolmanda osapoole projekt) on kahekordne:<\/p>\n<ol>\n<li>saadaolevate funktsioonide \u00f5ppimine,<\/li>\n<li>\u00f5ppida, kuidas nimetatud funktsioone kasutada.<\/li>\n<\/ol>\n<p>Ja t\u00f5esti, m\u00f5nikord pole isegi nende funktsioonide kasutamise \u00f5ppimine nii raske \u2013 see on teadmine, millal kasutada antud funktsiooni, et aidata koodi minimeerida, saavutades samas projekti eesm\u00e4rgid.<\/p>\n<h2>jQuery kloonimisfunktsioon<\/h2>\n<p>\u00dcks n\u00e4ide, mis meelde tuleb, on jQuery <strong>kloonimisfunktsiooni<\/strong> kasutamine. <a href=\"https:\/\/api.jquery.com\/clone\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Funktsiooni m\u00e4\u00e4ratlus<\/a> on lihtne:<\/p>\n<blockquote>\n<p>Meetod .clone() teeb sobivate elementide komplekti s\u00fcgava koopia, mis t\u00e4hendab, et see kopeerib sobitatud elemendid ning k\u00f5ik nende j\u00e4rglased elemendid ja tekstis\u00f5lmed.<\/p>\n<\/blockquote>\n<p>Funktsiooni hea k\u00fclg on see, et see v\u00f5ib luua funktsioonist ka &quot;madala&quot; koopia, mis t\u00e4hendab, et saate elemente kopeerida ilma s\u00fcndmuste t\u00f6\u00f6tlejate, alamelementide ja muuta.<\/p>\n<p>S\u00f5ltuvalt teie vajadustest on \u00fcks v\u00e4\u00e4rtuslikum kui teine. Kuid selle postituse puhul eeldage, et me tahame s\u00fcgavat koopiat.<\/p>\n<h3>1 V\u00f5imalik kasutusjuht<\/h3>\n<p>Oletame, et teil on lehel piltide komplekt ja iga pildi jaoks peate lisama s\u00fcndmuste t\u00f6\u00f6tleja, et pildil kl\u00f5psamisel midagi juhtuks.<\/p>\n<ul>\n<li>v\u00f5ib-olla ilmub modaalne dialoog,<\/li>\n<li>v\u00f5ib-olla saadetakse midagi serverisse as\u00fcnkroonse p\u00e4ringu kaudu,<\/li>\n<li>v\u00f5ib-olla tuleb lehe esitusviisi muuta,<\/li>\n<li>jne.<\/li>\n<\/ul>\n<p>ma ei tea. Olgu teie juhtum mis tahes, oletame, et teil on pilt v\u00f5i piltide komplekt ja peate kuvama modaalse dialoogi, kui sellel kl\u00f5psate.<\/p>\n<h3>2 Koodi seadistamine<\/h3>\n<p>Selleks peame tegema mitmeid asju.<\/p>\n<ol>\n<li>lisage piltidele kohandatud atribuut, et saaksime lisada \u00f5iged s\u00fcndmuste t\u00f6\u00f6tlejad,<\/li>\n<li>seadistada osa, millel on m\u00e4rgistus, mida tahame antud HTML-i t\u00fckiga kuvada,<\/li>\n<li><strong>Klooni<\/strong> kasutamine v\u00f5imendamiseks kasutage osa, mille oleme kirjutanud ja vajaduse korral dubleerinud.<\/li>\n<\/ol>\n<h4>Samm 1<\/h4>\n<p>Kui t\u00f6\u00f6tate WordPressiga ja otsite, kuidas lisada kohandatud pildiatribuute, n\u00e4ete <a href=\"https:\/\/wordpress.mediadoma.com\/et\/kohandatud-wordpressi-pildiatribuutide-lisamine\/\" title=\"selles postituses\">selles postituses<\/a> \u00f5petust, kuidas seda teha .<\/p>\n<h4>2 samm<\/h4>\n<p>Osalise loomine on lihtne. Kood v\u00f5ib olla sama lihtne kui <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-00-sample-markup-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">j\u00e4rgmine v\u00e4ljav\u00f5te<\/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 jah, v\u00f5ite selle kaunistada veidi CSS-iga ja lisada \u00fchele elemendile kohandatud koodi, kasutades PHP-d, kuid see h\u00f5lmab absoluutseid p\u00f5hit\u00f5desid.<\/p>\n<h4>3 samm<\/h4>\n<p>Oletame n\u00fc\u00fcd, et iga lehel oleva pildi jaoks (kohandatud atribuudiga nagu <strong>data-type=&quot;acme&#8221;<\/strong>) tahame lisada \u00fclaltoodud elemendi koopia lehele, mis on seotud iga lehe kujutisega.<\/p>\n<p>Selleks peame teadma:<\/p>\n<ol>\n<li>kui elemendil kl\u00f5psatakse,<\/li>\n<li>see on p\u00f5hielement,<\/li>\n<li>ja kuidas elementi <strong>kloonimismeetodi<\/strong> abil lisada.<\/li>\n<\/ol>\n<p>Nii et k\u00f5igepealt tahame tuvastada, millal antud pildil kl\u00f5psatakse. Selleks saame <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-01-loop-through-images-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l\u00e4bi vaadata k\u00f5ik<\/a> lehel olevad pildid, et saaksime lisada kohandatud s\u00fcndmuste t\u00f6\u00f6tleja:<\/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>Seej\u00e4rel, kui pildil kl\u00f5psatakse, leiame pildi emaelemendi, millel kl\u00f5psati (ja siis toimub <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-02-find-parent-elements-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">suurem osa t\u00f6\u00f6st<\/a> ).<\/p>\n<p>See t\u00e4hendab, et teeme elemendi koopia postituse alguses, kloonime selle ja lisame konteinerisse:<\/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 siis saame iga\u00fchega iseseisvalt t\u00f6\u00f6tada.<\/p>\n<h2>Paar gotchat<\/h2>\n<p>Elementide kloonimisel peate meeles pidama m\u00f5nda asja (mida on eespool mainitud). T\u00e4psemalt:<\/p>\n<ul>\n<li>pidage meeles, et olenevalt s\u00fcndmusek\u00e4sitlejast v\u00f5ite vajada kloonielemente erinevalt,<\/li>\n<li>peate v\u00f5ib-olla looma konkreetse elemendi jaoks kohandatud ID-d, enne kui lisate selle lehele,<\/li>\n<li>v\u00f5ib-olla tuleb m\u00f5nda elementi vahetada, kui midagi kl\u00f5psatakse,<\/li>\n<li>ja nii edasi.<\/li>\n<\/ul>\n<p>Kloonitud elemendi k\u00e4sitlemiseks on mitmeid viise, kuid alati veenduge, et\u00a0 elemendi <strong>kloonimisel<\/strong> tuvastaksite ja haldaksite s\u00fcndmusi \u00f5igesti, et te ei saaks eba\u00fchtlasi tulemusi.<\/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>N\u00e4idiskasutusjuht selle kohta, millal on jQuery kloonimisfunktsioon kasulik ja kuidas seda saab kasutada reaalses olukorras piltide, konteinerite, s\u00fcndmuste ja muuga.<\/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":[718,729,894,842],"tags":[1165],"class_list":["post-229428","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-javascript-4","category-kood","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=229428"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229428\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/165590"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=229428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=229428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=229428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}