| Autor | Zpráva | ||
|---|---|---|---|
| leonek Profil |
#1 · Zasláno: 4. 4. 2013, 13:47:26
Dobrý den.
Potřebuji pomoct se stránkou na kterou se mi z DB generují DIVy s informacemi. Chci aby se div po kliknutí na něj šedě podbarvil a pokud je podbarvený nějaký další tak aby se jeho podbarvení zrušilo. Zkrátka aby bylo podbarven jen ten div na který zrovna kliknu. Chtěl jsem to udělat takto ale nefunguje to: <div class=nejakydiv onClick="getElementsByClassName('nejakydiv').style.backgroundColor='#FFFFFF'; style.backgroundColor='#F5F5F5';">Myslel jsem to tak aby se při kliknutí na jeden z divů všem nastavilo bílé pozadí a následně tomuto divu jiné. Je to nesmysl nebo jen špatně zapsané? |
||
| IdemeNaHavaj Profil |
http://nuda.codebook.cz/
<div class="div1" id="div1" onClick="div2.style.backgroundColor='#F5F5F5';div1.style.backgroundColor='#FFFFFF';div3.style.backgroundColor='#F5F5F5'"> Div 1</div> <div class="div2" id="div2" onClick="div1.style.backgroundColor='#F5F5F5';div2.style.backgroundColor='#FFFFFF';div3.style.backgroundColor='#F5F5F5'""> Div 2</div> <div class="div3" id="div3" onClick="div1.style.backgroundColor='#F5F5F5';div2.style.backgroundColor='#F5F5F5';div3.style.backgroundColor='#FFFFFF'""> Div 3</div> |
||
| leonek Profil |
#3 · Zasláno: 4. 4. 2013, 14:09:33
Ano, výsledek by měl fungovat jako je to ve vaší ukázce. Bohužel zaprvé nevím přesný počet výsledných divů a navíc je jich několik stovek nejméně.
|
||
| Michal Maršálek Profil |
#4 · Zasláno: 4. 4. 2013, 14:17:16
Dobrý den,
možností je více. Buď podle tvého nápadu, ale v tom případě musíš divy projet cyklem foreach nebo si prostě uložit, který div byl naposled změněn a změnit barvu jen u něj. Každopádně, barvu pozadí aktuálního divu nastavíš this.style.backgroundColor ne jen style.backgroundColor. |
||
| Chamurappi Profil |
#5 · Zasláno: 4. 4. 2013, 14:23:30
Reaguji na leonka:
„ getElementsByClassName('nejakydiv')“
To vrací kolekci elementů, ke kterým můžeš jednotlivě přistupovat přes indexy [0], [1] atd., navíc nefunguje v Exploreru 8.
Jsou ty <div>y v nějakém společném rodiči?
Má být nějaký z nich obarvený na začátku? Je výsledek určený široké veřejnosti, nebo jen omezené cílové skupině, u níž jde zaručit přítomnost novějších prohlížečů? Musí být nabarvení zachováno i po kliknutí na jiné prvky ve stránce? Reaguji na Michala Maršálka: „musíš divy projet cyklem foreach“ Obyčejným forem.
„barvu pozadí aktuálního divu nastavíš this.style.backgroundColor ne jen style.backgroundColor“ V příkazech zapsaných v atributu funguje automaticky with(this).
|
||
| leonek Profil |
Reaguji na Chamurappiho:
> Jsou ty <div>y v nějakém společném rodiči? Rodičovský div není problém nastavit. > Má být nějaký z nich obarvený na začátku? Ne > Je výsledek určený široké veřejnosti, nebo jen omezené cílové skupině, u níž jde zaručit přítomnost novějších prohlížečů? > Musí být nabarvení zachováno i po kliknutí na jiné prvky ve stránce? Chci aby se to chovalo jakby (!) select ve formuláři. Tuto stránku připravuji pro použití na Tabletu s GoogleAndroidem a prohlížeč bude použit pravděpodobně Opera. Nevím jestli to tam bude vůbec fungovat, ale přinejhorším budou uživatelé PC (Výhradně Mozilla novější verze - naučil jsem si je na to :D) zvýhodněni o tuto funkci. Je to redkační systém na míru tomuto podniku. |
||
| IdemeNaHavaj Profil |
http://nuda.codebook.cz/
<script>
function zmenFarby(element)
{
links=document.getElementsByTagName("div");
for (var i = 0 ; i < links.length ; i ++){
links.item(i).style.backgroundColor='#F5F5F5';
element.style.backgroundColor='#FFFFFF';
}
}
</script><?php
for ($i = 1; $i <= 500; $i++) { //500 je pocet tvojich divov
?>
<div name="div" class="div" id="<?=$i?>" onClick="zmenFarby(this);">
Div <?=$i?></div>
<?php
}
?> |
||
| leonek Profil |
#8 · Zasláno: 4. 4. 2013, 15:36:27
Tak jsem ustoupil od toho aby se ten původně obarvený div odbarvil sám protože mi to přijde moc složité na to, že je to jen pomůcka pro "slepejše" a vymyslel jsem toto, ale asi jsem to zase špatně napsal...
<script>
function zabarvidiv(div){
backdiv = div.style.backgroundColor;
if(backdiv == \"#FFFFFF\" OR backdiv == \"\"){
div.style.backgroundColor='#F5F5F5';
}
else{
div.style.backgroundColor='#FFFFFF';
}
}
</script>
...
<div class=nejakydiv onClick=\"zabarvidiv(this);\"> |
||
| Chamurappi Profil |
#9 · Zasláno: 4. 4. 2013, 15:51:11
Reaguji na leonka:
Kdyby nemuselo být nabarvení zachováno při ťuknutí na něco jiného, šlo by dát <div>ům atribut tabindex s nějakým číslem a pak stylovat v CSS .nejakydiv:focus, fungovalo by to tedy úplně bez JavaScriptu.
Ale pokud to má být stejné jako přepínače ve formuláři, přidej společného rodiče, dej mu atribut onclick="nabarvi(this, event)" a přidej skript:
<script>
var naposledy;
function nabarvi(event)
{
var target = event.target || event.srcElement;
while(target && target.className != "nejakydiv") target = target.parentNode;
if(!target) return;
if(naposledy) naposledy.style.backgroundColor = "";
target.style.backgroundColor = "#F5F5F5";
naposledy = target;
}
</script>„vymyslel jsem toto, ale asi jsem to zase špatně napsal“ V JavaScriptu se OR píše jako dvě svislítka. Reaguji na IdemeNaHavaje: Doufám, že na té adrese zůstane ten příklad funkční na věky věků… protože jinak je taková odpověď z dlouhodobého hlediska skoro bezcenná. |
||
| Camo Profil |
leonek:
"od toho aby se ten původně obarvený div odbarvil sám protože mi to přijde moc složité" No tak to je bieda... Stačí si uložiť ten predošlý div do nejakej globálnej premennej a v tej funkcii ho odfarbíš. Ten cyklus od IdemeNaHavaj mi príde dosť predimenzovaný. lastDiv="";
function changeBG(elem){
elem.style.backgroundColor = "red";
lastDiv.style.backgroundColor = lastDiv==elem ? "red" : "white";
lastDiv=elem;
}var lastDiv="";
function changeBG(elem){
elem.style.backgroundColor = "red";
if(lastDiv != ""){
lastDiv.style.backgroundColor="white";
}
lastDiv=elem;
}var lastDiv;
function kchangeBG(elem){
if(lastDiv){
lastDiv.style.backgroundColor="white";
}
elem.style.backgroundColor = "red";
lastDiv=elem;
} |
||
|
Časová prodleva: 3 dny
|
|||
| leonek Profil |
Camo:
Perfektní řešení, děkuji a smekám... :-) EDIT: Vím že je to jednoduché, ale na tohle musí být člověk geniální aby vymslel něco tak prostého... :D |
||
|
Časová prodleva: 11 let
|
|||
0