Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Ersättning för getElementsByClassname?

rumbleinthejungles

Startad av rumbleinthejungles,
i Webbutveckling

Rekommendera Poster

rumbleinthejungles

rumbleinthejungles

Postad
Postad

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#

 

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

Tack! Om man inte vill använda JQuery (jag gissar att det är ett bibliotek med färdiga funktioner), hur går man tillväga då?

 

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

då skriver bra mycket mer js-kod, vilket jag inte orkar göra.

 

Varför inte använda ett smidigt js-bibliotek?

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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.

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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]

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad
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.

 

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

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>

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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!

 

 

 

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad
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;
}

 

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

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 =)

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

Oj, det kände jag inte till. Well, jag hittade "poängknappen" efter ett tag av idoget sökande. Försökte maxa antalet poäng, men det blev bara en ynka var.

 

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

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å ;)

 

Länk till kommentar
Dela på andra webbplatser
Cecilia

Cecilia

Postad
Postad
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.

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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]

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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 :-)

 

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad
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';

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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.

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

Lyckades klura ut det själv. Detta fungerar:

 

#box2 ul{

display:none;

}

 

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

{

uls.style.display="none";

}

else

{

uls.style.display="block" ;

}

 

 

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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]

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

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.

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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>

 

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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]

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

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]

Länk till kommentar
Dela på andra webbplatser
rumbleinthejungles

rumbleinthejungles

Postad
  • Trådskapare
Postad

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]

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...