1.6k Aufrufe
Gefragt in Skripte(PHP,ASP,Perl...) von friedel Experte (3.3k Punkte)
Hallo.
Ich steh mal wieder auf der Leitung und komme nicht weiter. Ich abstrahiere mal mein Problem anhand einer fiktiven Seite.

In einer Html-Seite ist eine Liste mit vielen gleichartigen Links.
<ul>
<li><a href="javascript:test();">Text</a></li>
<li><a href="javascript:test();">Text</a></li>
<li><a href="javascript:test();">Text</a></li>
...
</ul>

In der function test() soll dann ein eine Alertbox aufgerufen werden, die mit ausgibt, der wievielte Link angeklickt wurde.
Wenn in der Liste also z.B. 89 solcher links stehen, und man klickt auf den zwölften davon, sollte eine Alertbox "12" ausgeben.

Hat jemand eine Ahnung oder Idee, wie man das machen kann?

6 Antworten

0 Punkte
Beantwortet von
ergänze this:

<a href="javascript:test(this);">Text</a>



dann gehts über:
function test(a){
var alle_a=document.links;
for (var i=0;i<alle_a.length;i++) {
if (alle_a[i]==a) alert(i);
}
}


wenn nur die Links innerhalb zB dem Element mit der ID "navi" gezählt werden sollen:
...
var alle_a=document.getElementById("navi").getElementsByTagName("a");
...
0 Punkte
Beantwortet von friedel Experte (3.3k Punkte)
Oh Mann. Vor lauter Wald keine Bäume gefunden...

Danke.
0 Punkte
Beantwortet von friedel Experte (3.3k Punkte)
Hm. Ich war zu schnell. Es funktioniert nämlich nicht. Die Bedingung
if (alle_a[i]==a)
ist nie erfüllt. Ich mach jetzt erst mal was anderes. Das hilft oft.
0 Punkte
Beantwortet von
kannst du mal deinen Quellcode posten?
0 Punkte
Beantwortet von
hab's gecheckt: this liefert aus dem href das window.object, nicht den Link. Mit onclick gehts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titel der Seite</title>
<script type="text/javascript">
function test(a){
var alle_a=document.getElementById("navi").getElementsByTagName("a");
for (var i=0;i<alle_a.length;i++) {
if (alle_a[i]==a) alert(i);
}
}
</script>
</head>
<body>
<ul id="navi">
<li><a onclick="test(this);return false" href="">Text</a></li>
<li><a onclick="test(this);return false" href="">Text</a></li>
<li><a onclick="test(this);return false" href="">Text</a></li>
</ul> <!-- Inhalt hier -->
</body>
</html>


Besser gefällt mir die dynamische Hinzufügung der Funktionalität:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titel der Seite</title>
<script type="text/javascript">
onload=function(){
var alle_a=document.getElementById("navi").getElementsByTagName("a");
for (var i=0;i<alle_a.length;i++) {
alle_a[i].index=i;
alle_a[i].onclick=function(){
alert(this.index);
return false;
}
}
}
</script>
</head>
<body>
<ul id="navi">
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
<li><a href="">Text</a></li>
</ul> <!-- Inhalt hier -->
</body>
</html>
0 Punkte
Beantwortet von friedel Experte (3.3k Punkte)
Danke. Es war wohl gut, dass ich mal was anderes gemacht habe. Ich war, bevor ich aufgegeben hatte, auch bei deiner ersten Variante. Nur hat sie bei mir auch nicht funktioniert, weil ich noch einen Tippfehler drin hatte. Nach der Pause hab ich den Fehler gleich gefunden und es geht jetzt.

Die "dynamische Hinzufügung der Funktionalität" werde ich einbauen, weil mir die onclick-Variante nicht wirklich gefällt. Allerdings kann ich sie in meinem Anwendungsfall nicht ganz so einfach einbauen. Mal sehen, ob ich das ganze dadurch vielleicht sogar so hin bekomme, dass es ohne <noscript> auch eine brauchbare Funktion hat, wenn jemand JavaScript deaktiviert hat. (Obwohl das imho nur für Suchmaschinen Sinn macht. Viele der Seiten funktionieren ohne Script nicht.)
...