Just nu i M3-nätverket
Gå till innehåll
rumbleinthejungles

Ersättning för getElementsByClassname?

Rekommendera Poster

Jag har en meny med ett antal underavdelningar som är synliga eller dolda beroende på hur man klickar. För att komma åt dem har jag försett dem med olika id. Eftersom menyn är lång blir det många id:n och koden omständlig: många id, många funktioner.

 

Jag skulle vilja reducera alla dessa olika funktioner till en funktion. Tittade på getElementsByClassName, men det lär inte ha så förtvivlat bra stöd bland lite äldre webbläsare.

 

Kan man komma runt detta och i så fall hur?

 

Exempel finns här:

 

http://www.bahnhof.se/wb846624/meny/navigation.html#

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag försöker lära mig något nytt och då är nog jsbibliotek kanske inte det bästa medlet. Tids nog tar jag itu med det också. Naturligtvis ska du inte göra något du inte orkar, jag bara slängde ut frågan när jag insåg att getelementbyclass name inte har så där jättemycket stöd och det var precis den jag behövde. Omvägar finns ju alltid, men det är också knepigt för oss glada amatörer.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag har pillat litet med firstChild och nextSibling och fått det att fungera under vissa villkor.

 

http://www.bahnhof.se/wb846624/nav/navigation.html

 

Frågan är hur jag når ned till den andra oordnade listan. När man klickar på dess rubrik skall den "fälla ut" sig. Som det ser ut nu kan jag endast påverka den övre, oavsett var jag klickar.

En annan sak: av någon underlig anledning måste jag dubbelklicka på rubriken en gång innan den reagerar och därefter räcker det utmärkt med enkelklick.

Tips?

 

[inlägget ändrat 2009-06-04 11:36:26 av rumbleinthejungles]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
av någon underlig anledning måste jag dubbelklicka på rubriken en gång innan den reagerar och därefter räcker det utmärkt med enkelklick.

Tips?

 

Den hittar inte styleinformationen eftersom den är satt i css-filen, därav behövs dubbelklick.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

jag ändrade lite på strukturen och fick det att fungera rätt bra.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css">

/*#box2 ul{display:none;}*/

#box1{
width:140px;
float:left;
}

#box2{ background-color:#096;}

.rubrik{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}

#box2 a
{
display:block;
text-decoration:none;
#fff;
}
#box2 a:hover {color:#09c;}
</style>
<script type="text/javascript"> 
function showdiv(elm) 
{
var uls=elm.nextSibling.nextSibling;
uls.style.display = (uls.style.display=='none') ? '' : 'none' ;
}
</script>  
<title>Navigation</title> 
</head> 
<body> 
<div id="box1">  
	<div id="box2">
		<a href="#" onclick="showdiv(this)" title="link1">Del 1</a>  
		<ul style="display:none;" title="ul1"> 
		  <li><a href="#">Underavd 1</a></li> 
		  <li><a href="#">Underavd 1</a></li> 
		  <li><a href="#">Underavd 1</a></li> 
		 </ul> 
		<a href="#" onclick="showdiv(this)"  title="link2">Del 2</a> 
		<ul style="display:none;" title="ul2"> 
		  <li><a href="#">Underavd 2</a></li> 
		  <li><a href="#">Underavd 2</a></li> 
		  <li><a href="#">Underavd 2</a></li> 
		</ul> 
	</div> 
</div> 
</body>
</html>

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Du är då en jäkla klippa! Här sitter en annan och nästan ångar sönder över problemet, medan du löser det på nästan nolltid.... Tur att jag inte har dåligt självförtroende :-)

 

Tack för all hjälp! Jag ska nu kolla närmare på din lösning och se vad mer jag kan lära mig om ämnet. En fråga dock, en kort rackare. Du skriver:

 

uls.style.display = (uls.style.display=='none') ? '' : 'none' ;

 

 

Det där frågetecknet mitt i allt har jag aldrig stött på tidigare. Vad står det för i sammanhanget?

 

Än en gång: tack!

 

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Det där frågetecknet mitt i allt har jag aldrig stött på tidigare. Vad står det för i sammanhanget?

Det är ett sk. syntaktiskt socker (förkortad version av syntax typ) som ersätter en if-sats.

 

värde = (boolsktUttryck) ? värde1 : värde2;

 

utför samma sak som

 

if( boolsktUttryck) 
{
   värde=värde1;
}
else
{
   värde=värde2;
}

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Kuriosa: Jag skrev lite titles i markupen som inte behövs, jag satte dem för att testa DOM och säkerställa att den gick till nästa syskon. Det krävdes två nextSibling, vilket inte gick ihop för mig just då.

 

BTW, Jag och Anjuna gillar poäng så när du är nöjd med ett svar ge de som hjälpt till ett litet klick. (poäng kan man ge när man är inne i själva trådvisningen =)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ja det stämmer, men kan "endast" ge ett poäng per inlägg i en tråd och jo, poänganimationen är lite missvisande imho.

 

Tack iaf och keep the good work up! Snart blir du expert också ;)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Ja det stämmer, men kan "endast" ge ett poäng per inlägg i en tråd och jo, poänganimationen är lite missvisande imho.
Det finns flera rutor för att flera personer ska kunna ge poäng för samma inlägg.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag försöker nu föra över er fantastiska kreation till en extern javascriptfil (meningen är att även all css skall flyttas till en extern fil, men det är ett senare problem). Så här ser det ut:

----------------------------------------

 

<div id="box1">

<div id="box2">

<a href="#" id="link1">Del 1</a>

<ul style="display:none;">

<li><a href="#">Underavd 1</a></li>

<li><a href="#">Underavd 1</a></li>

<li><a href="#">Underavd 1</a></li>

</ul>

 

 

----------------------------------------

 

var listor=document.getElementById('box2').getElementsByTagName('a');

 

for(var i=0;i<listor.length;i++) {

 

 

 

listor.onclick=function() {

var uls=listor.nextSibling.nextSibling;

 

if( uls.style.display ==none)

{

uls.style.display="block";

}

else

{

uls.style.display="none" ;

}

 

}

 

}

 

 

---------------------------------

Detta funkar inte. Utan onclick kan jag inte använda this. Hur får jag skriptet att snappa informationen ändå?

 

[inlägget ändrat 2009-06-05 14:17:09 av rumbleinthejungles]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Expert? Kruxet är att jag faktiskt brukar förstå vad ni experter menar, men att jag inte är van vid syntaxen. Vilken jäkla ordning kommer saker i osv? Jag har inte tagit mig över den där kritiska tröskeln.... :-( frågan är väl om jag någonsin kommer att göra det :-)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
var uls=this.nextSibling.nextSibling; //kanske fungerar, annars listor

 

if( uls.style.display ==none)

{

uls.style.display="block";

}

else

{

uls.style.display="none" ;

}

 

// varför inte:

uls.style.display= (uls.style.display =='none') ? '' : 'none';

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag tycker att detta borde få listorna att gömma sig tills man klickar på en länk (jag flyttade css från htmlfilen till en separat cssfil):

 

listor.onclick=function() {

 

var uls=this.nextSibling.nextSibling; //kanske fungerar, annars listor

uls.style.display ="none";

if( uls.style.display =="none")

{

uls.style.display="block";

}

else

{

uls.style.display="none" ;

}

 

 

}

 

}

 

 

Men det har ingen som helst betydelse. Vad beror de t på?

 

Du undrar varför jag inte använder ditt förslag med frågetecknet? Det lär jag nog göra. Men jag vill ta en sak i sänder. Jag har vant mig vid att använda onclick och dylikt och sedan påpekade en klok figur att numera skall javascript vara unobtrusive, så nu måste jag delvis lära om.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag har försökt bygga ut exemplet. Varje listitem skall innehålla en länk. När man klickar på den skall en confirmruta dyka upp och fråga en om man verkligen vill besöka sidan x. Så här ser det ut:

 

var listor2=document.getElementById("box2").getElementsByTagName("a");

for(var i=0;i<listor2.length;i++) {

var syskon=this.nextSibling.nextSibling.firstChild;

syskon.onclick=function()

{

 

if(confirm("Vill du verkligen lämna sidan x?"))

{

 

return true;

}

else

{

return false;

}

}

}

 

Länkarna fungerar, men någon confirm syns aldrig. Jag gissar att det har att göra med raden nextSibling.nextSibling.firstChild, men den ser korrekt ut i mina ögon. Listans listitem är väl firsChild till listan ul?

 

[inlägget ändrat 2009-06-06 12:52:15 av rumbleinthejungles]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

det kanske _ser_ ok ut men har du kollat resultatet av syskon?

Är det rätt element som är valt?

Gör en felhantering för att se vart i problemet ligger.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Nu fungerar det (bortsett från en sak:

 

var listor2=document.getElementById("box2");

var syskon=listor2.getElementsByTagName("a");

for(var i=0;i<syskon.length;i++) {

 

syskon.onclick=function()

{

 

if(confirm("Vill du verkligen lämna sidan x?"))

{

 

return true;

}

else

{

return false;

}

}

}

 

Länkarna fungerar, confirmrutan dyker upp som avsett. Enda problemet är att scriptet också reagerar på när jag klickar på rubriken Länkar till listan (den visar confirmrutan då också):

 

<div id="box2">

 

<a href="#">Länkar</a>

<ul>

<li><a href="xxxxxx" class="extern">xxxxx</a></li>

<li><a href="xxxxxxxxx" class="extern">xxxxxx</a></li>

<li><a href="xxxxx" class="extern">xxxxxx</a></li>

</ul>

</div>

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Har felsökt lite. Utgick ifrån document.getElementById("box2") och lade successivt till parentNode, firstChild och firstSibling enligt följande:

 

parentNode.firstChild.firstChild.nextSibling.nextSibling

 

Dessa är tänkta att korrespondera med en div, en länk i diven och länkens syskon - en oordnad lista:

 

<div id="box2">

 

<a href="#">Länkar</a>

<ul>

<li><a href="xxxxxx" class="extern">xxxxx</a></li>

<li><a href="xxxxxxxxx" class="extern">xxxxxx</a></li>

<li><a href="xxxxx" class="extern">xxxxxx</a></li>

</ul>

</div>

 

Resultat:

 

FF IE

parentNode objecthtmldivelement object

+ firstChild object text object

+ firstChild null url till dokumentet

+ firstSibling undefined null

 

[inlägget ändrat 2009-06-06 18:44:58 av rumbleinthejungles]

[inlägget ändrat 2009-06-06 18:46:17 av rumbleinthejungles]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

jag hade kanske lyft ur den funktion som skall bekräfta när man klickar på länk av följande orsaker:

 

1. Användare är inte vana vid detta, och de vet som oftast vad de gör så varför inte skippa hela funktionen? Att gå ifrån hemsidan är inte kritiskt på något sätt som jag förstår.

 

2. Att lägga den separat från den andra funktionen är bättre.

Välj ut ALLA länkar i dokumentet och kontrollera om elementet har klassen "extern" och visa isf bekräftelsen.

Använd denna funktion om du inte vill iterera element med klassnamn

http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/

 

[inlägget ändrat 2009-06-07 16:05:23 av Jonas_Bo]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag har nu skilt de två funktionerna från varandra: den som kontrollerar menyn och den som styr vad som händer när man klickar en länk:

 

if (document.getElementsByClassName) {

extern = document.getElementsByClassName('extern');

for (var i = 0; i < extern.length; i++) {

extern.onclick = function() {

 

 

if(confirm("Vill du verkligen lämna xxxxx?"))

{

window.open(this.href,'_blank');

return true;

}

else

{

return false;

}

}

}

}

 

Det fungerar i FF och Opera, dock inte IE.

 

[inlägget ändrat 2009-06-07 17:55:38 av rumbleinthejungles]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...