Autor Zpráva
Anonymouz
Profil *
Mám vytvořený kód, který mi propisuje text z jednoho sloupce do formuláře. Nyní bych potřeboval pomoct, jak udělat, aby tento kód platil i pro ostatní tlačítka s tím, že sloupce mohou v budoucnu i přibývat. Chci se vyhnout prasárně - celý kód několikrát nakopírovat, očíslovat co je třeba a dělat to přes nth-child query selectory. Takové řešení sice taky funguje, ale není to dobře a rád bych zjistil řešení, jak se to má dělat pořádně.

Vytvořil jsem demo kódu codepen.io/anon/pen/mKxbgp

Předem děkuji za rady.
RastyAmateur
Profil
Anonymouz:
Řešil bych to přes rodiče a děti (viz ukázka (použito jQuery)). Bude to fungovat i na 50 sloupců. Pokud by přibývaly i ty odstavce a inputy ve formuláři, půjde použít nějaký jednoduchý cyklus.
Anonymouz
Profil *
Původně jsem to tvoje řešení zkoušel napsat bez jQuery, ale to mi nefungovalo. Zasílám odkaz pro pobavení Živá ukázka.
No ale nechal jsem tedy jQuery a pouze to přepsal, aby to fungovalo pro mé účely (selectory atd.) a funguje to.
RastyAmateur
Profil
Anonymouz:
Také mám problém s čistým JS. Každopádně občas pomůže stránka youmightnotneedjquery.com
Radek9
Profil
Anonymouz:
Bez jQuery třeba takhle: Živá ukázka

Důležité je si uvědomit, že jQuery ve většině případů pracuje rovnou s kolekcemi. Takže metoda on navěsí handler na všechny elementy v kolekci. To se v běžném DOMu musí dělat trochu jinak. Buď výběrem kolekce a cyklem (jako v ukázce), nebo navěšením handledru na rodičovský element.
Anonymouz
Profil *
Díky moc za ukázku, jak to vypadá v čistém JS. Dost jsem se díky obojímu naučil, co jsem neznal.
Obě řešení teď tedy dovedou udělat totéž a tak si trochu kladu otázku, které z nich je lepší. Selským rozumem to beru tak, že abych mohl využít jQuery na podobnou kravinku, tak kvůli tomu musím stahovat zbytečně celou knihovnu, která obsahuje spoustu dalších věcí, které třeba nepotřebuji. Dívám se na to správně, že je to tedy tak, že řešení pomocí jQuery bude o něco náročnější a pomalejší pro prohlížeč, než čistý JS? V tomto případě je to asi jedno, spíš se ptám, abych do budoucna věděl, zda rovnou sahat po jQuery, nebo se nejprve snažit najít řešení přes čisté JS.
RastyAmateur
Profil
Anonymouz:
Dle mého názoru je to čisté JS lepší řešení. Přesně kvůli tomu, co jsi psal - zbytečně stahuješ celou knihovnu kvůli jedné funkci... Já jsem se od Radka také přiučil. Když jsem se snažil udělat řešení také v čistém JS, neznal jsem funkci querySelectorAll(), kvůli které mi to nešlo... :-)
Anonymouz
Profil *
Ještě jsem se zamotal do jiné věci. Radkovo řešení mi funguje dobře. dokud používám this.parrent()


Ještě jsem se zamotal do jiné věci. Radkovo řešení mi funguje dobře. dokud používám this.parrentNode(), jenže já potřebuju this.closest(), protože se potřebuji dostat ještě vejš než jen do rodiče toho klikacího elementu. A když this.closest() použiju, tak to celé dunguje pouze při prvním kliknutí - potom je třeba refresh, neboť to háže chybu, že classList je prázdný. Na první kliknutí funguje vše dobře, na druhé už ne.
To musím v obyčejném JS nějak resetovat, aby to vědělo, kde se nacházet? Nevím zda to popisuju dobře, raději dávám ukázku. Živá ukázka
RastyAmateur
Profil
Anonymouz:
var odebrat = document.querySelector(".vc_row.neviditelnost");
odebrat.classList.remove("neviditelnost");
hledáš .vc_row.neviditelnost a pak tu třídu .neviditelnost odebereš, tudíž když se pak zase snažíš najít .vc_row.neviditelnost, element již neexistuje
Anonymouz
Profil *
Jo tak to mi vůbec nedošlo, že může být problém v tomhle. U jQuery to takhle prošlo, takže jsem to tak nechal. Po přepsání už to funguje. Člověk se pořád učí. Díky moc :)
Anonymouz
Profil *
Znovu bojuju s opakováním stejné funkce pro více elementů. Chci pomocí JS odebrat u cen lomítka, pokud neobsahují žádný text za tím. Když použiju normální JS, tak nefunguje querySelectorAll a s normálním selectorem to funuje pouze jednou. Když to zkusím pomocí jQuery, tak to zase funguje uplně všude i tehdy, když by to nemělo fungovat. Ani v jednom případě se mi nepodařilo umístit .this, abych označil, že to má fungovat pouze pro daný selector, který splňuje podmínku.


Edit: ukázka kódu Živá ukázka


Edit: ukázka kódu: Živá ukázka
RastyAmateur
Profil
Anonymouz:
Živá ukázka
Máš možnost toto ovlivnit již při výpisu? Myslím si, že by bylo lepší to řešit již na backendu aplikace
Keeehi
Profil
Anonymouz:
S jQuery je správný zápis tento. Živá ukázka

A jak píše RastyAmateur, pokud máš tu možnost tak by bylo lepší ty lomítka ze serveru neposílat. Je to čistší řešení.
Anonymouz
Profil *
Mám další problém.
V redakčním systému je použita šablona, kde se poslední články dané rubriky vypisují tak, že na detail článku se člověk dostane pouze přes titulek. Potřebuji tam doplnit tlačtko "číst více" které bude mít stejný odkaz jako titulek.
Myslel jsem si, že to bude snadné doplnit pomocí JS a bylo by, pokud bych to tak chtěl pouze jednou. Jakmile je na stránce více daných prvků, tak se mi nedaří vytáhnout URL z daného titulku. Přestože používám $(this), tak mi to vyzobává pouze href z prvního titulku.
Díky za každou radu.


Edit: zapomněl jsem dodat ukázku Živá ukázka
Keeehi
Profil
Živá ukázka
Ale bylo by mnohem lepší, kdyby to generovala rovnou ta šablona.
Anonymouz
Profil *
Moc děkuji, zkoušel jsem to i takhle, ale místo find() jsem dával closest(), takže proto mi to nefungovalo. Do šablony moc nechci hrabat, abych nekomplikoval případné aktualizace. Zkoušel jsem to přes child šablony, ale bohužel mi child příliš nafunguje u šablon, které využívají nějaký framework.
A bohužel neovládám PHP, abych to mohl obejít nějakým externím scriptem na straně serveru. Ani nevím, zda to php dovede tak jednoduše, jak si to představuji.
Anonymouz
Profil
Chci si vytvořit něco jako posuvník na porovnávání obrázků ve vanilla JS a mám problém s případným použitím stejného prvku, protože se mi evenet listener aplikuje na všechny třídy.
Myslel jsem si, že opakování stejné funkce už chápu, ale zřejmě ne dostatečně.

Přidávám ukázky.
Živá ukázka tady se to aplikuje úplně na vše.
Živá ukázka a tady se mi pro změnu aplikuje pouze na ten první.

Díky za každou radu.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0