{"id":229312,"date":"2022-11-15T14:32:00","date_gmt":"2022-11-15T11:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229312"},"modified":"2022-11-15T14:33:19","modified_gmt":"2022-11-15T11:33:19","slug":"kiedy-funkcja-klonowania-jquery-jest-przydatna","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/kiedy-funkcja-klonowania-jquery-jest-przydatna\/","title":{"rendered":"Kiedy funkcja klonowania jQuery jest przydatna?"},"content":{"rendered":"\n<p>Jedno z wyzwa\u0144 zwi\u0105zanych z nauk\u0105 biblioteki (czy to standardowej biblioteki funkcji dostarczanej z j\u0119zykiem programowania, czy z projektem innej firmy) jest dwojakie:<\/p>\n<ol>\n<li>poznanie dost\u0119pnych funkcji,<\/li>\n<li>nauka korzystania z tych funkcji.<\/li>\n<\/ol>\n<p>I tak naprawd\u0119 czasami nawet nauka korzystania z tych funkcji nie jest a\u017c tak trudna \u2013 to wiedza, kiedy u\u017cy\u0107 danej funkcji, aby pom\u00f3c zminimalizowa\u0107 kod, a jednocze\u015bnie osi\u0105gn\u0105\u0107 cele projektu.<\/p>\n<h2>Funkcja klonowania jQuery<\/h2>\n<p>Jednym z przyk\u0142ad\u00f3w, kt\u00f3ry przychodzi mi do g\u0142owy, jest u\u017cycie funkcji <strong>klonowania<\/strong> jQuery. <a href=\"https:\/\/api.jquery.com\/clone\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Definicja<\/a> funkcji jest prosta:<\/p>\n<blockquote>\n<p>Metoda .clone() wykonuje g\u0142\u0119bok\u0105 kopi\u0119 zestawu dopasowanych element\u00f3w, co oznacza, \u017ce \u200b\u200bkopiuje dopasowane elementy, a tak\u017ce wszystkie ich elementy potomne i w\u0119z\u0142y tekstowe.<\/p>\n<\/blockquote>\n<p>Zalet\u0105 funkcji jest to, \u017ce mo\u017ce ona r\u00f3wnie\u017c tworzy\u0107 \u201ep\u0142ytk\u0105&quot; kopi\u0119 funkcji. Oznacza to, \u017ce mo\u017cesz kopiowa\u0107 elementy bez obs\u0142ugi zdarze\u0144, element\u00f3w potomnych i tak dalej.<\/p>\n<p>W zale\u017cno\u015bci od potrzeb jeden b\u0119dzie bardziej warto\u015bciowy ni\u017c drugi. Ale w tym po\u015bcie za\u0142\u00f3\u017cmy, \u017ce poszukujemy g\u0142\u0119bokiej kopii.<\/p>\n<h3>1 Potencjalny przypadek u\u017cycia<\/h3>\n<p>Za\u0142\u00f3\u017cmy, \u017ce masz zestaw obraz\u00f3w na stronie i dla ka\u017cdego z nich musisz doda\u0107 obs\u0142ug\u0119 zdarze\u0144, aby po klikni\u0119ciu obrazu co\u015b si\u0119 sta\u0142o.<\/p>\n<ul>\n<li>by\u0107 mo\u017ce pojawi si\u0119 modalne okno dialogowe,<\/li>\n<li>by\u0107 mo\u017ce co\u015b jest wysy\u0142ane do serwera poprzez asynchroniczne \u017c\u0105danie,<\/li>\n<li>mo\u017ce trzeba zmieni\u0107 prezentacj\u0119 strony,<\/li>\n<li>itp.<\/li>\n<\/ul>\n<p>Nie wiem. Niezale\u017cnie od przypadku, za\u0142\u00f3\u017cmy, \u017ce masz obraz lub zestaw obraz\u00f3w i po klikni\u0119ciu musisz wy\u015bwietli\u0107 modalne okno dialogowe.<\/p>\n<h3>2 Konfigurowanie kodu<\/h3>\n<p>Aby to zrobi\u0107, musimy zrobi\u0107 kilka rzeczy:<\/p>\n<ol>\n<li>doda\u0107 niestandardowy atrybut do obrazk\u00f3w, dzi\u0119ki czemu b\u0119dziemy mogli do\u0142\u0105czy\u0107 odpowiednie handlery zdarze\u0144,<\/li>\n<li>ustawi\u0107 podszablon, kt\u00f3ry ma znacznik, kt\u00f3ry chcemy wy\u015bwietli\u0107 z danym fragmentem HTML,<\/li>\n<li>u\u017cycie <strong>klonu<\/strong> do wykorzystania, skorzystaj z cz\u0119\u015bci, kt\u00f3r\u0105 napisali\u015bmy i zduplikowali\u015bmy w razie potrzeby.<\/li>\n<\/ol>\n<h4>Krok 1<\/h4>\n<p>Je\u015bli pracujesz z WordPressem i szukasz sposobu dodawania niestandardowych atrybut\u00f3w obrazu, mo\u017cesz zapozna\u0107 si\u0119 z samouczkiem, jak to zrobi\u0107 w <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/dodawanie-niestandardowych-atrybutow-obrazu-wordpress\/\" title=\"tym po\u015bcie\">tym po\u015bcie<\/a>.<\/p>\n<h4>Krok 2<\/h4>\n<p>Tworzenie cz\u0119\u015bci jest proste. Kod mo\u017ce by\u0107 tak prosty, jak <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-00-sample-markup-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nast\u0119puj\u0105cy fragment<\/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>I tak, mo\u017cesz ubra\u0107 to troch\u0119 w CSS i doda\u0107 niestandardowy kod do jednego z element\u00f3w za pomoc\u0105 PHP, ale to obejmuje absolutne podstawy.<\/p>\n<h4>Krok 3<\/h4>\n<p>Za\u0142\u00f3\u017cmy teraz, \u017ce dla ka\u017cdego obrazu, kt\u00f3ry istnieje na stronie (z niestandardowym atrybutem, takim jak <strong>data-type=&#8221;acme&#8221;<\/strong> ), chcemy do\u0142\u0105czy\u0107 kopi\u0119 powy\u017cszego elementu do strony powi\u0105zanej z ka\u017cdym z obraz\u00f3w na stronie.<\/p>\n<p>Aby to zrobi\u0107, musimy wiedzie\u0107:<\/p>\n<ol>\n<li>kiedy element zostanie klikni\u0119ty,<\/li>\n<li>to element nadrz\u0119dny,<\/li>\n<li>i jak do\u0142\u0105czy\u0107 element za pomoc\u0105\u00a0 metody <strong>klonowania<\/strong>.<\/li>\n<\/ol>\n<p>Dlatego najpierw chcemy wykry\u0107, kiedy dany obrazek zostanie klikni\u0119ty. Aby to zrobi\u0107, mo\u017cemy <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-01-loop-through-images-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przej\u015b\u0107 przez wszystkie obrazy<\/a> na stronie, aby m\u00f3c do\u0142\u0105czy\u0107 niestandardowy program obs\u0142ugi zdarze\u0144:<\/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>Nast\u0119pnie, po klikni\u0119ciu obrazu, znajdujemy element nadrz\u0119dny obrazu, kt\u00f3ry zosta\u0142 klikni\u0119ty (i wtedy dzieje si\u0119 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/cdde5f1f6c63c25d981447e0e5874452#file-02-find-parent-elements-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wi\u0119kszo\u015b\u0107 pracy<\/a> ).<\/p>\n<p>Oznacza to, \u017ce pobieramy kopi\u0119 elementu wcze\u015bniej w po\u015bcie, klonujemy j\u0105 i do\u0142\u0105czamy do kontenera:<\/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>A potem z ka\u017cdym mo\u017cemy pracowa\u0107 niezale\u017cnie.<\/p>\n<h2>Kilka Gotchas<\/h2>\n<p>Podczas klonowania element\u00f3w nale\u017cy pami\u0119ta\u0107 o kilku rzeczach (o kt\u00f3rych wspomniano powy\u017cej). Konkretnie:<\/p>\n<ul>\n<li>pami\u0119taj, \u017ce mo\u017cesz potrzebowa\u0107 klonowanych element\u00f3w w r\u00f3\u017cny spos\u00f3b w zale\u017cno\u015bci od obs\u0142ugi zdarze\u0144,<\/li>\n<li>mo\u017ce by\u0107 konieczne utworzenie niestandardowych identyfikator\u00f3w dla danego elementu przed dodaniem go do strony,<\/li>\n<li>by\u0107 mo\u017ce element musi zosta\u0107 prze\u0142\u0105czony, gdy co\u015b zostanie klikni\u0119te,<\/li>\n<li>i tak dalej.<\/li>\n<\/ul>\n<p>Istnieje wiele sposob\u00f3w obs\u0142ugi sklonowanego elementu, ale za ka\u017cdym razem, gdy to zrobisz, upewnij si\u0119, \u017ce podczas <strong>klonowania<\/strong> elementu prawid\u0142owo identyfikujesz zdarzenia i zarz\u0105dzasz nimi, dzi\u0119ki czemu nie otrzymujesz b\u0142\u0119dnych wynik\u00f3w.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Przyk\u0142adowy przypadek u\u017cycia, kiedy funkcja klonowania jQuery jest przydatna i jak mo\u017cna j\u0105 zastosowa\u0107 w rzeczywistej sytuacji z obrazami, kontenerami, zdarzeniami i nie tylko.<\/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":[721,732,897,845],"tags":[1169],"class_list":["post-229312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-javascript-7","category-kod","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=229312"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229312\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/165590"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=229312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=229312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=229312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}