| Autor | Zpráva | ||
|---|---|---|---|
| juho123 Profil * |
#1 · Zasláno: 27. 11. 2011, 16:23:12
Ahojte,
potrebujem na zaklade zaskrtnutych checkboxov dynamicky vypisat cenu: <input type="checkbox" name="suroviny[]" value="1"> Jedlo1 <input type="checkbox" name="suroviny[]" value="2"> Jedlo2 <input type="checkbox" name="suroviny[]" value="3"> Jedlo3 <input type="checkbox" name="suroviny[]" value="4"> Jedlo4 <div id=vysledok></div> Prosim, ako to dosiahnut najefektivnejsie? Tu cenu si mozem zadefinovat niekde do onclick a potom to nejako cez jquery spocitat. Dakujem za vase rady. |
||
| Kcko Profil |
#2 · Zasláno: 27. 11. 2011, 17:02:23 · Upravil/a: Kcko
Tak nejtriviálněji takto http://jquery.jslab.net/zkousecka/#318f57fc84a02f3277357ce58b2e7138
<input type="checkbox" name="suroviny[]" value="1" onclick="addPrice(100,this);"> Jedlo1 <input type="checkbox" name="suroviny[]" value="2" onclick="addPrice(200,this);"> Jedlo2 <input type="checkbox" name="suroviny[]" value="3" onclick="addPrice(300,this);"> Jedlo3 <input type="checkbox" name="suroviny[]" value="4" onclick="addPrice(400,this);"> Jedlo4 <div id=vysledok></div> var totalPrice = 0;
function addPrice(price, obj)
{
if (obj.checked)
{
totalPrice += price;
}
else
{
totalPrice -= price;
}
$("#vysledok").text(totalPrice + " Kč");
} |
||
| Radek9 Profil |
#3 · Zasláno: 27. 11. 2011, 17:06:45
Kcko:
Máš nějaký zvláštní důvod tam cpát jQuery? |
||
| Witiko Profil |
#4 · Zasláno: 27. 11. 2011, 17:08:37 · Upravil/a: Witiko
<input type="checkbox" name="suroviny[]" data-cena="16" value="1"> Jedlo1
<input type="checkbox" name="suroviny[]" data-cena="25" value="2"> Jedlo2
<input type="checkbox" name="suroviny[]" data-cena="36" value="3"> Jedlo3
<input type="checkbox" name="suroviny[]" data-cena="11" value="4"> Jedlo4
<span id="výsledok">0</span>Kč
<script>
(function(suroviny, výsledok, súčet) {
var i = 0, j; while(j = suroviny[i++]) j.onclick = (function(cena) {return function() {
if(this.checked) súčet += cena; else súčet -= cena;
výsledok.nodeValue = súčet;
}})(+j.getAttribute("data-cena"));
})(document.getElementsByName("suroviny[]"), (this.výsledok || document.getElementById("výsledok")).firstChild, 0);
</script> |
||
| Kcko Profil |
#5 · Zasláno: 27. 11. 2011, 17:08:47
Radek9:
Tu cenu si mozem zadefinovat niekde do onclick a potom to nejako cez jquery spocitat. Pokud máš stejnou úchylku jako Chamurappi a jemu podobní (nenávist k jQuery), povídej si o tom s ním. Já na to ani na Tebe nejsem zvědavavý. |
||
| Witiko Profil |
#6 · Zasláno: 27. 11. 2011, 17:25:26
Kcko:
„jako Chamurappi a jemu podobní (nenávist k jQuery)“ Myslíš jako třeba mě? :-) Když dám stranou věc osobní preference, tak je často kód, který tu lidé s jQuery splodí, poměrně nečitelný - asi díky jejich naprosté neznalosti podložního jazyka, technologií a technik algoritmizace. S Tvým kódem v tomto ohledu problém nemám - jedná se o velmi čitelný zápis činnosti scriptu. Nicméně stejně je tu framework příslovečným kanónem na vrabce. |
||
| Kcko Profil |
#7 · Zasláno: 27. 11. 2011, 17:32:44 · Upravil/a: Kcko
Witiko:
Třeba i Tebe, ale za poslední dobu jsi se uklidnil, stejně tak jako já, takže se o věčném tématu bavit nemusíme >:]. Zakladatel topicu dle toho co požaduje, už framework jQuery pravděpodobně použivá, takže na to není nutno brát ohled. Je teda fakt, že toto $("#vysledok").text(totalPrice + " Kč");šlo zapsat pomocí innerHtml a k jQuery bychom se vůbec nedostali. (Síla zvyku). Můj kód byl napsán tak, aby byl pro tazatele co nejpochopitelnější (jeho neznalost lze snadno odhadnout dle tohoto topicu ...). U tvého kódu s tím bude mít celkem problém, nemyslíš? ;-) (On, nikoliv Ty nebo tobě podobně zdatní ...) Hezký večer. |
||
| Witiko Profil |
#8 · Zasláno: 27. 11. 2011, 17:40:05 · Upravil/a: Witiko
Kcko:
„za poslední dobu jsi se uklidnil“ To ani ne, jen se sem nedostanu tak často. :D „šlo zapsat pomocí innerHtml“ Nebo pomocí přímé manipulace s DOM Textovými Uzly, viz. můj kód řádek 11. :-)„U tvého kódu s tím bude mít celkem problém, nemyslíš?“ Je tomu tak, můj kód je zaměřen na maximální kompaktnost. Nicméně zasílající má vždy možnost dotázat se proč, co a jak, pokud má skutečně zájem. Já to tak dělal, když jsem tu začínal. :-) Občas připíšu do kódu i komentáře, nicméně těžko bez věštící koule odhadnout úroveň odesilatele a co ještě pochopí / nepochopí. |
||
| juho123 Profil * |
#9 · Zasláno: 27. 11. 2011, 21:27:04
Dakujem Vam velmi pekne.
Chcel by som pomoct este s jednou vecou a to: <input type="checkbox" name="suroviny[]" value="1" onclick="addPrice(100,this);"> Jedlo1 <input type="checkbox" name="suroviny[]" value="2" onclick="addPrice(200,this);"> Jedlo2 <input type="checkbox" name="suroviny[]" value="3" onclick="addPrice(300,this);"> Jedlo3 <input type="checkbox" name="suroviny[]" value="4" onclick="addPrice(400,this);"> Jedlo4 <div id="sumarizacia"> <ul> <li>Jedlo3 <a href="#">vymazat</a></li> ... </ul> </div> <div id=vysledok></div> Jednoducho, ked si to jedlo zakliknem, tak sa mi dole vypisu vsetky zakliknute. Viete mi prosim poradit? Dakujem za Vase rady. |
||
| Kcko Profil |
#10 · Zasláno: 27. 11. 2011, 21:49:13
Takto např.
http://jquery.jslab.net/zkousecka/#3de097d8070b7ca86f4463b019875194 $(document).ready(function(){
});
var totalPrice = 0;
var zakliknute = [];
function addPrice(price, obj)
{
if (obj.checked)
{
totalPrice += price;
}
else
{
totalPrice -= price;
}
zakliknute = []; // clear
$(":checkbox:checked").each(function(){
zakliknute.push(this.value);
});
$("#vysledok").text(totalPrice + " Kč, zakliknuté jsou: " + zakliknute.toString() );
} |
||
| juho123 Profil * |
#11 · Zasláno: 27. 11. 2011, 23:17:19
Dakujem velmi pekne!
a este ked tam mam select box, kde mam pocet kusov, teda ked dam ze 5, tak este celu sumu vynasobi 5-timy. Ako to prosim Vas spravit? Velka vdaka! |
||
| Kcko Profil |
#12 · Zasláno: 27. 11. 2011, 23:45:25
|
||
| juho123 Profil * |
#13 · Zasláno: 27. 11. 2011, 23:52:19
Dakujem, si borec!
Este ked s niecim nebudem pohnut, dam vediet. Este raz velka vdaka. |
||
| Chamurappi Profil |
#14 · Zasláno: 28. 11. 2011, 10:29:01
Reaguji na Kcka:
Tvé skripty počítají s tím, že se při každém kliknutí změní stav zatržení. V Exploreru při druhém kliknutí během dvojkliku ke změně nedojde, ale ke kliknutí ano, takže se cena zvedá/snižuje dvakrát. Méně zkušení brouzdalové zbytečně dvojklikají docela často. V Opeře šel dvojklikem (tuším) také vytvořit nějaký hůře patrný problém, ale ve stávající verzi se mi ho nepovedlo napodobit. Ovšem podařilo se mi v ní teď naopak změnit stav, aniž bych vyvolal událost kliknutí :-) Reaguji na juha123: „potom to nejako cez jquery spocitat“ Framework neřeší aritmetiku. Hodil bych si onclick na obalující formulář a v něm projel všechny this["suroviny[]"], cenu bych si dal buď do atributů (jako Witiko) nebo do pole definovaného klidně přímo v tom onclicku, jehož indexy by odpovídaly pořadí zaškrtávátek.
|
||
| Kcko Profil |
#15 · Zasláno: 28. 11. 2011, 12:36:29 · Upravil/a: Kcko
Chamurappi:
V Exploreru při druhém kliknutí během dvojkliku ke změně nedojde, ale ke kliknutí ano, takže se cena zvedá/snižuje dvakrát. Vyzkouším si. Proč by měl někdo na checkbox klikat 2x? Klikneš jednou a je zakliknuto. Edit: Je to tak, při madness klikání se uvedená "chyba" projeví, jak se to opraví? juho123: Večer Ti kód přepíši odznova. Tohle je strašnej bastl ;-) |
||
| _es Profil |
#16 · Zasláno: 28. 11. 2011, 12:57:51
Kcko:
„se uvedená "chyba" projeví, jak se to opraví?“ Zmenou výpočtu celkovej sumy. Napríklad tak, že sa stav checkboxu uloží do poľa, obsahujúceho stavy aj ostatných checkboxov a až z toho poľa sa vyráta celková cena. Je to menej výpočtovo náročné, než prechádzanie všetkých checkboxov v cykle pri každom kliknutí ([#14] Chamurappi). |
||
| Kcko Profil |
#17 · Zasláno: 28. 11. 2011, 13:06:03
_es:
Ok díky |
||
| Chamurappi Profil |
#18 · Zasláno: 28. 11. 2011, 15:42:33
Reaguji na Kcka:
„Proč by měl někdo na checkbox klikat 2x?“ Protože v tajuplném světě počítačů dvojklik funguje na spoustě míst lépe než jeden klik — to je jedna z pouček, kterým dobře rozumějí jen začátečníci :-) Ze stejného důvodu také určité procento lidí docela často dvojkliká na malé obrázkové odkazy (pokud jim dojde, že jde o odkazy). Mimochodem Mozilla též umí na zaškrtávátku ignorovat druhou půlku dvojkliku — pokud se dvojkliká na přidružený <label>. Ale tam vzniká jen jedna událost onclick.„jak se to opraví?“ Použiješ .change z jQuery, kde je exploreří chování nejspíš ošetřené :-)
Ale stejně mi to celé připadá tak nějak na vodě. |
||
| juho123 Profil * |
#19 · Zasláno: 28. 11. 2011, 17:41:12
Kcko:
> juho123: > Večer Ti kód přepíši odznova. Tohle je strašnej bastl ;-) Ok, pockam, dakujem velmi pekne! |
||
| Witiko Profil |
#20 · Zasláno: 28. 11. 2011, 18:33:05 · Upravil/a: Witiko
juho123:
<form name="formulár">
<input type="checkbox" name="suroviny[]" data-cena="16" id="0" value="0"> <label for="0">Svíčková s brusinkami</label><br>
<input type="checkbox" name="suroviny[]" data-cena="25" id="1" value="1"> <label for="1">Vepřové se zelím</label><br>
<input type="checkbox" name="suroviny[]" data-cena="36" id="2" value="2"> <label for="2">Medvědí tlapa</label><br>
<input type="checkbox" name="suroviny[]" data-cena="11" id="3" value="3"> <label for="3">Snídaně čínského mnicha</label><hr>
<span id="výsledok">0</span> Kč, Zatrhnuté <span id="seznam">nie je nič</span>
</form>
<script>
(function(formulár, labely, výsledok, seznam, súčet, súpis) {
formulár.onclick = function(e) {
e = e || event;
var cieľ = e.target || e.srcElement,
cena = +cieľ.getAttribute("data-cena"),
hodnota = labely[cieľ.id].firstChild.nodeValue,
index = súpis.indexOf(hodnota);
if(cieľ.checked) {
súčet += cena;
if(index === -1) súpis.push(hodnota);
} else {
súčet -= cena;
if(index !== -1) súpis.splice(index, 1);
} seznam.nodeValue = !súpis.length?"nie je nič":(
súpis.length === 1?"je: " + súpis[0]:
"sú: " + súpis.join(", "));
výsledok.nodeValue = súčet;
};
})(document.formulár, document.formulár.getElementsByTagName("label"),
(this.výsledok || document.getElementById("výsledok")).firstChild,
(this.seznam || document.getElementById("seznam")) .firstChild, 0, []);
Array.prototype.indexOf = function(needle) {
for(var i = 0, l = this.length; i !== l; i++)
if(this[i] === needle) return i; return -1;
};
</script>Něco jsem také stvořil, aby tu neměl Kcko monopol. :D |
||
| Chamurappi Profil |
#21 · Zasláno: 28. 11. 2011, 18:55:42 · Upravil/a: Chamurappi
Reaguji na Witika:
„aby tu neměl Kcko monopol“ S tímhle kódem nejspíš nebudeš v očích juhoa123 moc konkurenceschopný :-) Nebylo by lepší oddělit funkci od jejího volání a nehandrkovat se se zbytečnými optimalizacemi typu (this.výsledok || document.getElementById("výsledok")) a zapisováním do nodeValue? Snažíš se snad ukázat, jak je to bez frameworku komplikované?„var cieľ = (e || event).target“ Na exploreřím eventu není target, ale srcElement.„formulár.onchange“ Explorer vyvolává onchange na zaškrátávátkách, až když ztratí focus. Proto je lepší chytat kliknutí.
|
||
| Kcko Profil |
#22 · Zasláno: 28. 11. 2011, 18:59:13
Witiko:
Něco jsem také stvořil, aby tu neměl Kcko monopol. :D A už se mi nic psát nechce, nebudeme se tu přeci predhánět kdo dodá líbivější či zoptimalizovanější kód ne? >:], jdu si radši zahrát mafii 2 |
||
| Witiko Profil |
#23 · Zasláno: 28. 11. 2011, 19:05:09 · Upravil/a: Witiko
Chamurappi:
Odpovídáš moc dlouho, oboje jsem opravil ještě než ses ozval. :D Jinak jak jsem konkurenceschopný v očích juhoy123 mi nevadí, ten by nejraději, abych to psal v jQuery. :-) Na to, že je to bez frameworku mi přijde můj kód ještě docela krátký. |
||
| Kcko Profil |
#24 · Zasláno: 28. 11. 2011, 19:12:48
Witiko:
Ještě mu doplň cenu * počet kusů ze selectboxu ;-), aby to bylo kompletní. |
||
| Witiko Profil |
#25 · Zasláno: 28. 11. 2011, 19:14:12
Kcko:
Myslíš počet porcí. :-) |
||
| _es Profil |
#26 · Zasláno: 28. 11. 2011, 20:03:53
Witiko:
Nie je tam toho kódu trochu priveľa? Na čo bude informácia, čo sa zaškrtlo, to je predsa jasne vidieť už z tých zaškrtávadiel. Asi by to stačilo nejako takto (ukážka): <!doctype html>
<meta charset="utf-8">
<form name="formulár">
<input type="checkbox" name="suroviny[]" data-cena="16" id="0" value="0"> <label for="0">Svíčková s brusinkami</label><br>
<input type="checkbox" name="suroviny[]" data-cena="25" id="1" value="1"> <label for="1">Vepřové se zelím</label><br>
<input type="checkbox" name="suroviny[]" data-cena="36" id="2" value="2"> <label for="2">Medvědí tlapa</label><br>
<input type="checkbox" name="suroviny[]" data-cena="11" id="3" value="3"> <label for="3">Snídaně čínského mnicha</label><hr> <span id="vysledok">0</span> Kč
</form><script>
var ch=[], cena=[], el=document.forms[0].elements, n=0, vystup=document.getElementById("vysledok");
for(var i=0; i<el.length; i++){
if(el[i].name=="suroviny[]"){
ch[n]=el[i].checked=false; cena[n++]=Number(el[i].getAttribute("data-cena")); el[i].onclick=f;
}
}
function f(){
var vysledok=0;
ch[this.id]=this.checked;
for(var i=0; i<n; i++)vysledok+=ch[i]*cena[i];
vystup.innerHTML=vysledok;
}
</script> |
||
| Witiko Profil |
#27 · Zasláno: 28. 11. 2011, 21:29:34 · Upravil/a: Witiko
_es:
Ta informace by byla k ničemu, ale juho123 chce výpis zaškrtnutých jídel. Minimalistická verze je už zde. |
||
| _es Profil |
#28 · Zasláno: 28. 11. 2011, 21:46:16
Witiko:
„Minimalistická verze je už zde.“ Trpí to neduhom, ktorý popísal Chamurappi. Rýchlym klikaním sa dá v IE8 vyrobiť záporný súčet alebo chybu v JS: 'labely[...].firstChild' is null or not an object.
|
||
| Witiko Profil |
#29 · Zasláno: 28. 11. 2011, 22:02:09
_es:
V odkazovaném kódu se proměnná labely nevyskytuje. |
||
| _es Profil |
#30 · Zasláno: 28. 11. 2011, 22:10:31
Witiko:
„V odkazovaném kódu se proměnná labely nevyskytuje.“ Testoval som to v tom odkaze na pastehtml.com, tam je iný kód, no možnosť nezosúladenia celkovej ceny so zaškrtnutými checkboxami bude asi aj vo vloženom kóde v príspevku, pretože sa k celkovej sume priráta alebo odráta niečo po udalosti onclick, namiesto úpravy výpočtu celkovej sumy navrhnutej v [#16].
|
||
|
Téma pokračuje na další straně.
|
|||
0