En av utmaningarna med att l\u00e4ra sig ett bibliotek (vare sig det \u00e4r standardbiblioteket med funktioner som kommer med ett programmeringsspr\u00e5k eller ett tredjepartsprojekt) \u00e4r tv\u00e5faldig:<\/p>\n
Och faktiskt, ibland \u00e4r det inte s\u00e5 sv\u00e5rt att l\u00e4ra sig hur man anv\u00e4nder dessa funktioner \u2013 det \u00e4r att veta n\u00e4r man ska anv\u00e4nda en viss funktion f\u00f6r att hj\u00e4lpa till att minimera koden samtidigt som man uppn\u00e5r projektets m\u00e5l.<\/p>\n
Ett exempel som kommer att t\u00e4nka p\u00e5 \u00e4r anv\u00e4ndningen av jQuerys klonfunktion<\/strong>. Definitionen<\/a> av funktionen \u00e4r enkel:<\/p>\n Metoden .clone() utf\u00f6r en djupkopia av upps\u00e4ttningen av matchade element, vilket inneb\u00e4r att den kopierar de matchade elementen s\u00e5v\u00e4l som alla deras underordnade element och textnoder.<\/p>\n<\/blockquote>\n Det fina med funktionen \u00e4r att den \u00e4ven kan skapa en "grund" kopia av funktionen, vilket inneb\u00e4r att du kan kopiera elementen utan h\u00e4ndelsehanterare, underordnade element och s\u00e5 vidare.<\/p>\n Beroende p\u00e5 dina behov kommer den ena att vara mer v\u00e4rdefull \u00e4n den andra. Men f\u00f6r det h\u00e4r inl\u00e4gget, anta att en djup kopia \u00e4r vad vi \u00e4r ute efter.<\/p>\n L\u00e5t oss s\u00e4ga att du har en upps\u00e4ttning bilder p\u00e5 en sida och f\u00f6r var och en av dessa bilder m\u00e5ste du l\u00e4gga till n\u00e5gon h\u00e4ndelsehanterare s\u00e5 att n\u00e5got h\u00e4nder n\u00e4r bilden klickas.<\/p>\n jag vet inte. Oavsett vad ditt fall kan vara, l\u00e5t oss s\u00e4ga att du har en bild eller en upps\u00e4ttning bilder och du m\u00e5ste visa en modal dialogruta n\u00e4r den klickas.<\/p>\n F\u00f6r att g\u00f6ra detta finns det flera saker vi beh\u00f6ver g\u00f6ra:<\/p>\n Om du arbetar med WordPress och letar efter hur du l\u00e4gger till anpassade bildattribut kan du se en handledning f\u00f6r hur du g\u00f6r det i det h\u00e4r inl\u00e4gget<\/a>.<\/p>\n Att skapa en del \u00e4r enkelt. Koden kan vara s\u00e5 enkel som f\u00f6ljande kodavsnitt<\/a> :<\/p>\n Och ja, du kan kl\u00e4 upp det med lite CSS och l\u00e4gga till lite anpassad kod till ett av elementen med PHP, men detta t\u00e4cker de absoluta grunderna.<\/p>\n L\u00e5t oss nu s\u00e4ga att f\u00f6r varje bild som finns p\u00e5 sidan (med ett anpassat attribut som data-type="acme”<\/strong> ), vill vi l\u00e4gga till en kopia av ovanst\u00e5ende element p\u00e5 sidan som \u00e4r relaterad till var och en av bilderna p\u00e5 sidan.<\/p>\n F\u00f6r att g\u00f6ra detta beh\u00f6ver vi veta:<\/p>\n S\u00e5 f\u00f6rst vill vi uppt\u00e4cka n\u00e4r en given bild klickas. F\u00f6r att g\u00f6ra detta kan vi g\u00e5 igenom alla bilder<\/a> p\u00e5 sidan s\u00e5 att vi kan bifoga en anpassad h\u00e4ndelsehanterare:<\/p>\n\n
1 Ett potentiellt anv\u00e4ndningsfall<\/h3>\n
\n
2 St\u00e4lla in koden<\/h3>\n
\n
Steg 1<\/h4>\n
Steg 2<\/h4>\n
<p class=\"acme-element\">\n <span>Acme<\/span>\n<\/p><!--- .acme-element --><\/code><\/pre>\nSteg 3<\/h4>\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 \/\/ ...\n\n});<\/code><\/pre>\n