Link soll verändert werden

[Heinz]

Hallo Forum,

ich habe ein Image, das einen onclick-event beinhaltet.

Nun würde ich dieses gerne dynamisch mitändern. Die Backslashes lass ich mal drin und poste dierekt den php-code.

  
<img src=\"click.png\" style=\"cursor: pointer\" onclick=\"go_function('".$row[8]."d1','".$row[8]."d0')\">  

soll nach dem Klicken zu

  
<img src=\"click.png\" style=\"cursor: pointer\" onclick=\"go_function('".$row[8]."d0','".$row[8]."d1')\">  

werden.

Was muß ich hierzu in der function "go_function()" eintragen?

Grüße, Heinz

[1UnitedPower]

Beschreibe mal dein eigentliches Problem.
Dein Vorhaben ist zwar prinzipiell möglich, aber kann unmöglich ein sauberer Lösungsansatz für _irgendetwas_ seien.

[Heinz]

Beschreibe mal dein eigentliches Problem.
Dein Vorhaben ist zwar prinzipiell möglich, aber kann unmöglich ein sauberer Lösungsansatz für _irgendetwas_ seien.

Sehe ich anders.
Die Funktion blendet ein zuvor verstecktes DIV ein. Und dann steht es da. Zum "wieder verstecken" kann ich entweder den Link ändern oder den Code dergestalt aufblähen, dass ich 2 DIVs gegeneinander komplett austausche (dann ändere ich den Link quasi hartcodiert) oder aber die Funkton ändert den Link (so wie ich das eben fragte).

[Der Martin]

Hallo,

Beschreibe mal dein eigentliches Problem.

und bitte, ohne den Ausschnitt des clientseitigen Codes mit PHP-Code zu verunstalten. Es geht um einen rein clientseitigen Effekt, da macht serverseitiger Code das Verstehen nur schwieriger.

Die Funktion blendet ein zuvor verstecktes DIV ein. Und dann steht es da.

Gut. Dafür quasi "selbstmodifizierenden Code" zu verwenden, ist aber in höchstem Maß kryptisch und fehleranfällig. Stattdessen sollte die aufgerufene Funktion einfach "nachsehen", ob das fragliche Element momentan sichtbar ist (z.B. die display-Eigenschaft abfragen), und es abhängig davon entweder verstecken oder wieder sichtbar machen. Eventuell ein zweites Element gleich komplementär dazu (das vermute ich anhand deines Codeauszugs).
Soll der Code wiederverwendbar sein (dieselbe Funktion in anderen Projekten, oder derselbe Effekt für mehrere Elemente innerhalb eines Projekts), dann übergib der Funktion eine Referenz auf das zu ändernde Element bzw. die Elemente.

Zum "wieder verstecken" kann ich entweder den Link ändern ...

Du hast da nirgends einen Link.

oder den Code dergestalt aufblähen, dass ich 2 DIVs gegeneinander komplett austausche (dann ändere ich den Link quasi hartcodiert) oder aber die Funkton ändert den Link (so wie ich das eben fragte).

Das ist aber alles mit Elefanten auf Mücken geschossen.

Ciao,
 Martin

[Heinz]

Hi Martin,

ich zitiere jetzzt mal Dein Post, Chris hats ja ähnlich angesprochen, aber Du besser beschrieben.

Stattdessen sollte die aufgerufene Funktion einfach "nachsehen", ob das fragliche Element momentan sichtbar ist (z.B. die display-Eigenschaft abfragen), und es abhängig davon entweder verstecken oder wieder sichtbar machen. Eventuell ein zweites Element gleich komplementär dazu (das vermute ich anhand deines Codeauszugs).

Ok. Wieder was gelernt. Halte ich für eine gute Idee.

Soll der Code wiederverwendbar sein (dieselbe Funktion in anderen Projekten, oder derselbe Effekt für mehrere Elemente innerhalb eines Projekts), dann übergib der Funktion eine Referenz auf das zu ändernde Element bzw. die Elemente.

Ähm, das verstehe ich jetzt nicht so ganz. Kannst Du mir dafür ein Codebeispiel geben? Was ist "eine Referenz auf das zu ändernde Element"?

oder den Code dergestalt aufblähen, dass ich 2 DIVs gegeneinander komplett austausche (dann ändere ich den Link quasi hartcodiert) oder aber die Funkton ändert den Link (so wie ich das eben fragte).

Das ist aber alles mit Elefanten auf Mücken geschossen.

Jaja, das sagte ich ja.

Grüße, Heinz

[Der Martin]

Hallo,

Soll der Code wiederverwendbar sein (dieselbe Funktion in anderen Projekten, oder derselbe Effekt für mehrere Elemente innerhalb eines Projekts), dann übergib der Funktion eine Referenz auf das zu ändernde Element bzw. die Elemente.
Ähm, das verstehe ich jetzt nicht so ganz. Kannst Du mir dafür ein Codebeispiel geben? Was ist "eine Referenz auf das zu ändernde Element"?

dann machen wir mal ein Beispiel. Wir denken uns eine Funktion ShowHide(), die zwei Elemente wechselweise ein- oder ausblendet.

function ShowHide(el1, el2)                             // Funktion bekommt zwei Elementreferenzen  
 { if (el1.style.display=="none"                        // ist el1 schon ausgeblendet?  
    { el1.style.display = "";                           // el1 auf CSS-Defaultwert zurücksetzen  
      el2.style.display = "none";                       // el2 unsichtbar machen  
    }  
   else  
    { el1.style.display = "none";                       // siehe oben  
      el2.style.display = "";                           // nur umgekehrt  
    }  
 }

Der Aufruf kann nun ganz unterschiedlich aussehen, da diese Funktion völlig isoliert von der Außenwelt ist. Sie muss nicht wissen, wie die Dokumentstruktur aussieht, oder wann und woher sie aufgerufen wird; sie soll nur den Anzeigestatus von zwei Elementen umkehren, deren Referenz(!) sie als Parameter bekommt.
Könnte also aus einem onclick-Eventhandler sein:

<p onclick="ShowHide(this, document.getElementById('SomeOther')">

Hier wird für das erste Element this übergeben, das ist immer eine Referenz auf das "aktuelle" Objekt - in diesem Fall dasjenige, das den Klick erhält. Das zweite Element fische ich anhand seiner ID aus dem Dokument, egal wo es steht.

Wie man hier die beiden Elemente ermittelt, ist aber völlig Banane für den Effekt.
Hilft dir das ein Stück weiter?

So long,
 Martin

[Bernd]

Hi Martin,

dann machen wir mal ein Beispiel.

Das Beispiel ist verständlich. Hatte ich sogar inzwischen selber genau so erstellt. :-)

<p onclick="ShowHide(this, document.getElementById('SomeOther')">

Hier wird für das erste Element this übergeben, das ist immer eine Referenz auf das "aktuelle" Objekt - in diesem Fall dasjenige, das den Klick erhält. Das zweite Element fische ich anhand seiner ID aus dem Dokument, egal wo es steht.

Cool. Muß ich mir unbedingt merken, werde ich sicher brauchen und einsetzen können.

Hilft dir das ein Stück weiter?

Insofern klar, hilft mir sehr gut weiter, danke.

Im konkreten Beispiel habe ich aber eine etwas andere "Aufgabenstellung". Über das Element mit dem Onclick-Event-Handler rufe ich die Funktion auf, die (inzwischen) dann ermittelt, wie der Display-Status des Elementes mit der als Parameter übergebenen ID ist und diesen jeweils ins Gegenteil verkehrt.

Nun würde ich aber gerne weitere Elemente "hinten dran hängen", soll heißen, ich würde gerne auf einen "onclick-event" hin gleich mehrere Elemente ins "display-Gegenteil" versetzen.

Soweit wäre das klein Problem, weil ich ja mehrere Parameter übergeben könnte.

Wenn ich diese Funktion aber allgemeingültig gestalten wollen würde, stoße ich an meine Javascript-Kenntnis-Grenzen.

Ich hätte dann nämlich gerne ein "System", nach der ich die IDs vergebe und, egal wie viele es dann sind, die Funktion macht "den Rest", erkennt also alle IDs die in ihr Gegenteil verkehrt werden sollen, ohne das ich sie zuvor explizit als Parameter übergeben hätte.

Wie könnte ich das umsetzen? Oder geht das gar  nicht?
Ich dachte z.b. an eine ID nach dem  Motto id='changedisplay_1', die ich hochzählen könnte und bei der ich im onclick-event als Parameter nur 'changedisplay' übergebe. In der Funktion würde ich den Paramterstring dann splitten und dann in einer Schleife die übergebenen IDs durchgehen?

So in der Art? Oder geht das leichter?

Grüße, Heinz

[Heinz]

Grüße, Heinz

Hä? Und warum steht jetzt Bernd neben dem Post?
Hab ich eigentlich nicht eingetragen, aber schon als Bernd hier gepostet.
Seltsam.

[Der Martin]

Hallo,

Das Beispiel ist verständlich. Hatte ich sogar inzwischen selber genau so erstellt. :-)

prima. :-)

Im konkreten Beispiel habe ich aber eine etwas andere "Aufgabenstellung". Über das Element mit dem Onclick-Event-Handler rufe ich die Funktion auf, die (inzwischen) dann ermittelt, wie der Display-Status des Elementes mit der als Parameter übergebenen ID ist und diesen jeweils ins Gegenteil verkehrt.

Okay. Hast du auch gelesen, dass Gunnar meinen Ansatz inzwischen kritisiert hat? Und womit? Mit Recht!

Die Alternative, die er empfiehlt, ist nicht nur sauberer, sondern auch wesentlich universeller verwendbar. Man setzt bzw. löscht in der aufgerufenen Funktion nur eine Klasse eines Vorfahrenelements aller Elemente, die manipuliert werden sollen (im einfachsten Fall könnte das sogar das body-Element sein), und legt die Eigenschaften dann mit CSS individuell für die beiden Zustände fest.

Nun würde ich aber gerne weitere Elemente "hinten dran hängen", soll heißen, ich würde gerne auf einen "onclick-event" hin gleich mehrere Elemente ins "display-Gegenteil" versetzen.
Ich hätte dann nämlich gerne ein "System", nach der ich die IDs vergebe ...

Das brauchst du dann nicht mehr.

Ciao,
 Martin

[Heinz]

Die Alternative, die er empfiehlt, ist nicht nur sauberer, sondern auch wesentlich universeller verwendbar. Man setzt bzw. löscht in der aufgerufenen Funktion nur eine Klasse eines Vorfahrenelements aller Elemente, die manipuliert werden sollen (im einfachsten Fall könnte das sogar das body-Element sein), und legt die Eigenschaften dann mit CSS individuell für die beiden Zustände fest.

Sch...e, da hätte ich auch selber drauf kommen können :-))

Hat aber den Nachteil, dass ich dieses Vorfahrenelement zwingend brauche. Das ist, wenn eine(!) Tabellenzelle un-/sichtbar gemacht werden soll, nicht ganz einfach, da es kein sinnvolles Vorfahrenselement hierzu gibt.

oder?

Grüße, Heinz

[Der Martin]

Hallo,

Die Alternative, die er empfiehlt, ...
Sch...e, da hätte ich auch selber drauf kommen können :-))

klar, das ist bei vielen guten Ideen so. Bekommt man sie erklärt, fragt man sich oft: Warum ist mir das nicht eingefallen?

Hat aber den Nachteil, dass ich dieses Vorfahrenelement zwingend brauche. Das ist, wenn eine(!) Tabellenzelle un-/sichtbar gemacht werden soll, nicht ganz einfach, da es kein sinnvolles Vorfahrenselement hierzu gibt.

Doch, sicher. Man kann ja zusätzlich per ID selektieren.

Ciao,
 Martin

[Heinz]

Doch, sicher. Man kann ja zusätzlich per ID selektieren.

Dann steh ich grad wieder auf dem Schlauch. Wie meinst Du das?

Grüße, Heinz

[Der Martin]

Hallo,

Doch, sicher. Man kann ja zusätzlich per ID selektieren.
Dann steh ich grad wieder auf dem Schlauch. Wie meinst Du das?

so, wie ich es schrieb.

<ol>  
 <li>Eins</li>  
 <li>Zwei</li>  
 <li id="drei">Drei</li>  
 <li>Vier</li>  
 <li>Fünf</li>  
 <li id="sechs">Sechs</li>  
 <li>Sieben</li>  
</ol>

Der obige Code ergibt zwar noch nicht viel Sinn, er soll nur demonstrieren, dass ich bis Sieben zählen kann. ;-)
So, und jetzt denk mal drüber nach, auf welche Elemente die CSS-Selektoren ol #drei und ol #sechs passen. Klar soweit? - Und nun gib in Gedanken dem ol-Element noch die Klasse "alternate". Auf welche Elemente passt nun ol.alternate #drei, auf welche ol.alternate #sechs? Natürlich passt das erstgenannte Pärchen immer noch, dessen Definitionen können aber durch das zweite, spezifischere Pärchen überschrieben werden.

Wenn also das HTML sinnvoll strukturiert ist, wirst du fast immer eine Kombination von Selektoren finden, mit denen die gewünschten Elemente (und nur die) eindeutig selektiert werden können.

Ciao,
 Martin

[Heinz]

Der obige Code ergibt zwar noch nicht viel Sinn, er soll nur demonstrieren, dass ich bis Sieben zählen kann. ;-)

*g* :-)

So, und jetzt denk mal drüber nach, auf welche Elemente die CSS-Selektoren ol #drei und ol #sechs passen. Klar soweit? - Und nun gib in Gedanken dem ol-Element noch die Klasse "alternate". Auf welche Elemente passt nun ol.alternate #drei, auf welche ol.alternate #sechs? Natürlich passt das erstgenannte Pärchen immer noch, dessen Definitionen können aber durch das zweite, spezifischere Pärchen überschrieben werden.

Aaah, da machen sich CSS-Mängel im Verständnis bemerkbar.

Ich hänge dazu mal 2-3 Fragen an, die ich immer mal klären wollte.

1. Mal habe ich Selektoren, die mit # anfangen, mal welche, die mit . anfangen. Wo ist da der genaue Unterschied?

2. Ich verstehe die Hierarchie und deren dazugehörige Notation der Selektoren nicht genau. Dein Beispiel ist für mich (glaube ich) verständlich und ich erkenne die Logik (Deines Beispiels). Was mir fehlt, ist der Grundstock (vor allem der Notation), wie man Selektoren weitergehend spezifiziert.

Gruß, Heinz

[Gunnar Bittersmann]

@@Heinz:

nuqneH

1. Mal habe ich Selektoren, die mit # anfangen, mal welche, die mit . anfangen. Wo ist da der genaue Unterschied?

Das eine sind ID-Selektoren, das andere Klassenselektoren. [CSS3SEL] Etwas betagter, dafür auf deutsch: [CSS20 §5, http://de.selfhtml.org/css/formate/zentrale.htm@title=SELFHTML]

Was mir fehlt, ist der Grundstock (vor allem der Notation), wie man Selektoren weitergehend spezifiziert.

Immer noch?

Qapla'

[Heinz]

Immer noch?

Hi Gunnar,

erstmal "bedankt" für die Links. Jetzt wird einiges klarer.
Einen Satz hab ich nicht ganz verstanden:

"ID-Selektoren haben eine höhere Spezifität als Attribut-Selektoren. In HTML beispielsweise ist der Selektor #p123 spezifischer als [ID=p123], was die Kaskade betrifft."

Was bedeutet das?

Gruß, Heinz

P.S. Auf meine Fragestellung bezogen habe ich das ganz noch nicht konkret durchdacht bzw. angewendet. Es könnte also sein, dass ich noch weitere Fragen habe, ich muß mal schauen.

[Gunnar Bittersmann]

@@Heinz:

nuqneH

"ID-Selektoren haben eine höhere Spezifität als Attribut-Selektoren. In HTML beispielsweise ist der Selektor #p123 spezifischer als [ID=p123, was die Kaskade betrifft."]

Was bedeutet das?

Das bedeutet, dass bei

#p123 { background: red }  
[id="p123"] { background: green }

das Element* mit der ID "p123" roten Hintergrund bekommt, nicht grünen. Weil der ID-Selektor speziFISCHer ist als der Attributselektor.

Hingegen würden bei

.foo { background: red }  
[class="foo"] { background: green }

alle Elemente* der Klasse "foo" grünen Hintergrund bekommen, weil der Klassenselektor lediglich eine andere Schreibweise für den class-Attributselektor ist und bei mehreren gleich spezifischen Selektoren der letztere gewinnt.

(Zumindest aus CSS-Sicht gibt es keinen Unterschied. AFAIK haben Browser Klassenselektoren besonders implementiert. '.foo' sollte performanter sein als '[class="foo"]'.)

Qapla'

* Der Unterschied zwischen Einzahl und Mehrzahl ist nicht willkürlich.

[Heinz]

Danke für die Erklärungen, jetzt hab ichs.

Weil der ID-Selektor speziFISCHer ist als der Attributselektor.

Lach. Coole Darstellung.

Heinz

[Heinz]

Hi,

warum wird meine Regel für das ol-element nicht erkannt?

  
<html>  
 <head>  
<style type="text/css">  
.ol {  
background-color:#FFFF66;  
color:#339900;  
font-size:1.4em;  
font-weight:bold;  
}  
  
#drei {  
background-color:#FFFF66;  
color:#3366FF;  
padding:10px;  
margin:0px;  
}  
  
</style>  
 </head>  
  
 <body>  
  
<ol>  
 <li>Eins</li>  
 <li>Zwei</li>  
 <li id="drei">Drei</li>  
 <li>Vier</li>  
 <li>Fünf</li>  
 <li id="sechs">Sechs</li>  
 <li>Sieben</li>  
</ol>  
  
 </body>  
</html>  

Gruß, Heinz

[Der Martin]

Hallo,

warum wird meine Regel für das ol-element nicht erkannt?

ganz einfach ... ;-)

.ol {

background-color:#FFFF66;
color:#339900;
font-size:1.4em;
font-weight:bold;
}

  
Du hast keine Regel für ein ol-Element, sondern eine Regel für irgendein Element mit der Klasse "ol".  
  
Ciao,  
 Martin  

-- 
Zwei Politiker auf dem Weg zum Sitzungssaal: "Was sagten Sie in ihrer Rede neulich noch zur Rentenreform?" - "Nichts." - "Ja, schon klar. Aber wie haben Sie es formuliert?"  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Heinz]

ganz einfach ... ;-)

Du hast keine Regel für ein ol-Element, sondern eine Regel für irgendein Element mit der Klasse "ol".

Bullsh... ;-))
Manchmal sieht man vor lauter Bäumen den Wald nicht mehr.
Danke Dir, Heinz

[Heinz]

<ol>

<li>Eins</li>
<li>Zwei</li>
<li id="drei">Drei</li>
<li>Vier</li>
<li>Fünf</li>
<li id="sechs">Sechs</li>
<li>Sieben</li>
</ol>

>   
> Der obige Code ergibt zwar noch nicht viel Sinn, er soll nur demonstrieren, dass ich bis Sieben zählen kann. ;-)  
> So, und jetzt denk mal drüber nach, auf welche Elemente die CSS-Selektoren `ol #drei`{:.language-css} und `ol #sechs`{:.language-css} passen. Klar soweit? - Und nun gib in Gedanken dem ol-Element noch die Klasse "alternate". Auf welche Elemente passt nun `ol.alternate #drei`{:.language-css}, auf welche `ol.alternate #sechs`{:.language-css}? Natürlich passt das erstgenannte Pärchen immer noch, dessen Definitionen können aber durch das zweite, spezifischere Pärchen überschrieben werden.  
>   
  
  
Ja, das verstehe ich.  
Nachteil ist aber doch, dass ich zuvor die Selektore #frei und #sechs zum Attribut ol vorher in meiner CSS-Datei definieren müsste.  
  
Unabhängig davon, dass ich also vorher wissen müsste, welche Selektoren jemals benutzt werden würden, wäre ich auch durch diese "Vorabauswahl" beschränkt, oder nicht?  
  
Konkret geht es um eine dynamisch erstellte (theoretisch unendlich lange) Liste mit Eindträgen, die über ein onclick-Event einen zusätzlichen Eintrag erhalten können. Die ID, die die Listenelemente erhalten, ist aus einer DB und wird dort über autoincrement erzeugt.  
  
  

> Wenn also das HTML sinnvoll strukturiert ist, wirst du fast immer eine Kombination von Selektoren finden, mit denen die gewünschten Elemente (und nur die) eindeutig selektiert werden können.  
  
  
Es müsste aber die ID aus der db sein. Und ich kann doch meine CSS-Definitionen nicht unendlich lang machen?  
  
Oder habe ich da doch noch einen kleinen Denkfehler, was Deine Erklärung angeht?  
  
Heinz  

[Der Martin]

Hi,

Nachteil ist aber doch, dass ich zuvor die Selektore #frei und #sechs zum Attribut ol vorher in meiner CSS-Datei definieren müsste.

du müsstest gar nix. Die Selektion anhand einer ID war ja nur als Beispiel gedacht. Natürlich kannst du die Feinauswahl anhand unzähliger anderer Kriterien machen.

Unabhängig davon, dass ich also vorher wissen müsste, welche Selektoren jemals benutzt werden würden, wäre ich auch durch diese "Vorabauswahl" beschränkt, oder nicht?

Hä?

Konkret geht es um eine dynamisch erstellte (theoretisch unendlich lange) Liste mit Eindträgen, die über ein onclick-Event einen zusätzlichen Eintrag erhalten können. Die ID, die die Listenelemente erhalten, ist aus einer DB und wird dort über autoincrement erzeugt.

Ja und? Wenn du bestimmte Elemente anders formatieren willst als andere, dann müssen sie sich doch durch ein konkretes Merkmal vom Rest unterscheiden. Dieses Merkmal gilt es zu finden oder festzulegen, dann kannst du die Elemente -sehr wahrscheinlich- auch per CSS danach auswählen.

Wenn also das HTML sinnvoll strukturiert ist, wirst du fast immer eine Kombination von Selektoren finden, mit denen die gewünschten Elemente (und nur die) eindeutig selektiert werden können.
Es müsste aber die ID aus der db sein.

Nö. Es müsste ein bestimmtes, charakteristisches Merkmal dieser Elemente sein, nicht zwangsläufig ihre ID. Vielleicht ihre Stellung in der DOM-Struktur? VIelleicht eine weitere Klasse? Vielleicht der Elementtyp (oft findet man was Besseres als das nichtssagende div)?

Ciao,
 Martin

[Heinz]

du müsstest gar nix. Die Selektion anhand einer ID war ja nur als Beispiel gedacht. Natürlich kannst du die Feinauswahl anhand unzähliger anderer Kriterien machen.

Unzähliger? Naja...
Nochmal, konkret geht es um eine dynamisch erstellte (theoretisch unendlich lange) Liste mit Eniträgen, die über ein onclick-Event einen zusätzlichen Eintrag erhalten können. Die ID, die die Listenelemente erhalten, ist aus einer DB und wird dort über autoincrement erzeugt.

Noch konkreter?

  
  <table>  
  <tr>  
	<td>1a</td>  
	<td>1b</td>  
	<td>1c</td>  
	<td>1d</td>  
  </tr>  
  <tr>  
	<td>2a</td>  
	<td>2b</td>  
	<td>2c</td>  
	<td>2d</td>  
  </tr>  
  <tr>  
	<td>3a</td>  
	<td>3b</td>  
	<td>3c</td>  
	<td>3d</td>  
  </tr>  
  </table>  

Die Zellen 2a und 2c sollen über einen Klick eindeutig selektiert werden.
Ok, dann bekämen sie halt die Klasse "alternate" per JS zugewiesen und dann gehts, stimmts?

Ok. Aber über einen anderen Klick sollen die Zellen 3a und 3b eindeutig selektiert werden. Ok, dann bekämen sie halt die Klasse "alternate3" per JS zugewiesen und dann gehts, stimmts?

Ok. Aber über einen anderen Klick sollen die Zellen 4a und 4b eindeutig selektiert werden. Ok, dann bekämen sie halt die Klasse "alternate4" per JS zugewiesen und dann gehts, stimmts?

Ok. Aber über einen anderen Klick sollen die Zellen 5a und 5b eindeutig selektiert werden. Ok, dann bekämen sie halt die Klasse "alternate5" per JS zugewiesen und dann gehts, stimmts?

usw.

Nachteil: Ich muss alle diese Klasse vorher definieren. Und ich weiß gar nicht, wie viele ...

Sekunde, da gabs doch einen Selektor, der danach schaut, ob eine Klasse einen bestimmten Begriff beinhaltet? Aber der nützt auch nicht wirklich was, weil das ja dann alle anderen auch beinhaten. Unterscheoden tun sich die zu selektierenden Zellen letztlich nur über die ID.

Aber ich weiß doch zum Zeitpunkt meiner CSS-Definitionen nicht, welche IDs ich diesbzgl. so alles brauchen werde??

Schwierig...

Nö. Es müsste ein bestimmtes, charakteristisches Merkmal dieser Elemente sein, nicht zwangsläufig ihre ID. Vielleicht ihre Stellung in der DOM-Struktur? VIelleicht eine weitere Klasse? Vielleicht der Elementtyp (oft findet man was Besseres als das nichtssagende div)?

Aber was nur?

Gruß, Heinz

[Matthias Apsel]

Om nah hoo pez nyeetz, Heinz!

Unzähliger? Naja...
Nochmal, konkret geht es um eine dynamisch erstellte (theoretisch unendlich lange) Liste mit Eniträgen ...

Soll denn tatsächlich _jedes_ Element anders als _alle_ anderen sein?

Matthias

[Heinz]

Hallo Matthias,

erstmal danke, dass Du hier nochmal rein schaust.

Nochmal, konkret geht es um eine dynamisch erstellte (theoretisch unendlich lange) Liste mit Eniträgen ...

Soll denn tatsächlich _jedes_ Element anders als _alle_ anderen sein?

Ja, das scheint ja genau das Problem zu sein. Zwar nicht jedes Element anders als alle ansderen, aber doch jede "Elementegruppe" anders als alle anderen Elementegruppen.

Es geht ja konkret darum, innerhalb einer Tabellenzeile die Einträge editierbar zu machen. Insofern wäre dann die Zeile die Elementegruppe und die Zellen die Elemente.

Wieviele Zeilen die Tabelle enthält, ist sehr unterschiedlich und auch (theoretisch) unendlich.
Und jetzt sag Du mir mal bitte, ob ich wirklich zu doof bin, das hier ium Thread gesagte umzusetzen oder ob ich mit meinem Einwand richtig liege?

Gruß,Heinz

[Matthias Apsel]

Om nah hoo pez nyeetz, Heinz!

Wieviele Zeilen die Tabelle enthält, ist sehr unterschiedlich und auch (theoretisch) unendlich.
Und jetzt sag Du mir mal bitte, ob ich wirklich zu doof bin, das hier ium Thread gesagte umzusetzen oder ob ich mit meinem Einwand richtig liege?

Ich tendiere tatsächlich zu ersterem. Aber nicht, weil du zu doof bist, sondern weil du zu kompliziert denkst und auch noch nicht dein Vorhaben komplett aufgedeckt hast.

Ich greife dazu mal dies auf (stammt von dir)

Noch konkreter?

<table>
  <tr>
<td>1a</td>
<td>1b</td>
<td>1c</td>
<td>1d</td>
  </tr>
  <tr>
<td>2a</td>
<td>2b</td>
<td>2c</td>
<td>2d</td>
  </tr>
  <tr>
<td>3a</td>
<td>3b</td>
<td>3c</td>
<td>3d</td>
  </tr>
  </table>

  
Weiter schreibst du, dass du durch einen Klick irgendwelche td's selektieren möchtest. Wo möchtest du denn klicken? Ganz woanders? In der Tabelle selbst? Kannst du eine kleine Seite online stellen, wie es am Ende tatsächlich aussehen soll? Meinetwegen mit deinen 5 alternate-Klassen. Dann kann man sehen, an welcher Stelle was geändert werden kann.  
  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Gunther]

Hallo Heinz and @all!

Wieviele Zeilen die Tabelle enthält, ist sehr unterschiedlich und auch (theoretisch) unendlich.
Und jetzt sag Du mir mal bitte, ob ich wirklich zu doof bin, das hier ium Thread gesagte umzusetzen oder ob ich mit meinem Einwand richtig liege?

Ich tendiere tatsächlich zu ersterem. Aber nicht, weil du zu doof bist, sondern weil du zu kompliziert denkst und auch noch nicht dein Vorhaben komplett aufgedeckt hast.

Weiter schreibst du, dass du durch einen Klick irgendwelche td's selektieren möchtest. Wo möchtest du denn klicken? Ganz woanders? In der Tabelle selbst? Kannst du eine kleine Seite online stellen, wie es am Ende tatsächlich aussehen soll? Meinetwegen mit deinen 5 alternate-Klassen. Dann kann man sehen, an welcher Stelle was geändert werden kann.

Letzteres wäre vermutlich äußerst hilfreich, denn ehrlich gesagt blickt hier doch kein Mensch mehr durch,_was_denn jetzt eigentlich wirklich beabsichtigt ist!

Am Anfang des Threads ging es darum, dass bei einem Klick auf ein Image "irgendetwas" (laut Thread-Titel ein/der Link) verändert werden sollte. Und nach ein paar "Umwegen" sind wir jetzt mittlerweile bei Tabellenzellen angekommen, deren Struktur im Bezug auf ihre IDs und Classes man nur ansatzweise erahnen kann, genauso wie die Intention des Anklickens. Wenn die Zellen "editierbar" sein sollen, dann könnte man auch gleich Input-, bzw. Textarea-Felder nehmen und sich diesen ganzen "Klick Kram" sparen.

Also bevor der OP nicht verständlich zumindest soviel verraten hat, dass der Gesamtkontext daraus klar hervorgeht, kann man IMHO hier nicht wirklich weiterhelfen.

Gruß Gunther

[Gunnar Bittersmann]

@@Heinz:

nuqneH

Hat aber den Nachteil, dass ich dieses Vorfahrenelement zwingend brauche. Das ist, wenn eine(!) Tabellenzelle un-/sichtbar gemacht werden soll, nicht ganz einfach, da es kein sinnvolles Vorfahrenselement hierzu gibt.

Das tr-Element? Das table-Element? Oder wie Der Martin schon sagte, das body-Element?

Für eine Tabellenzelle dürfte display: none ungeeignet sein.

Qapla'

[Heinz]

Das tr-Element? Das table-Element? Oder wie Der Martin schon sagte, das body-Element?

Hi Gunnar,

aber dann würde doch die ganze Zeile geändert, nicht nur die eine Zelle darin?

Für eine Tabellenzelle dürfte display: none ungeeignet sein.

Nicht, wenn stattdessen eine andere Zelle sichtbar geschaltet wird, die beiden Zellen sich also abwechseln/umtauschen.

Grüße, Heinz

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Stattdessen sollte die aufgerufene Funktion einfach "nachsehen", ob das fragliche Element momentan sichtbar ist (z.B. die display-Eigenschaft abfragen)

Noch besser ist es, die display-Eigenschaft weder mit JavaScript abzufragen noch zu setzen. Sondern den Status bspw. in einer Klasse eines geeigneten Elements zu speichen und den Rest das Stylesheet erledigen zu lassen. Warum ist das so schwer …?

Wenn denn auch mal andere Browsewr außer Chrome details / summary unterstützen, braucht man dafür gar kein JavaScript mehr.

Qapla'

[ChrisB]

Hi,

Die Funktion blendet ein zuvor verstecktes DIV ein. Und dann steht es da. Zum "wieder verstecken" kann ich entweder den Link ändern oder

… oder die gleiche Funktion beim nächsten Klick erneut ausführen lassen – und diese fragt dann den Status des Divs ab – sichtbar oder nicht – und ändert ihn ins Gegenteil.

MfG ChrisB

[1UnitedPower]

Sehe ich anders.

Jetzt hoffentlich nicht mehr

[Kai]

Hallo Heinz

hast du soetwas gemeint?

function go_function(id, A, B) {  
	document.getElementById().onclick = function() {go_function(id, B, A);}  
}

dazu brauchts nur eine ID

<img id="img01" src="click.png" onclick="go_function('img01', 'ebbesd0', 'ebbesd1')">

gruss kai

[Kai]

Hallo Heinz

hast du soetwas gemeint?

function go_function(id, A, B) {  
	document.getElementById(id).onclick = function() {go_function(id, B, A);}  
}

dazu brauchts nur eine ID

<img id="img01" src="click.png" onclick="go_function('img01', 'ebbesd0', 'ebbesd1')">

Korrektur

[Heinz]

Hallo Heinz

hast du soetwas gemeint?

function go_function(id, A, B) {

document.getElementById().onclick = function() {go_function(id, B, A);}
}

>   
  
Hi Kai,  
  
ja, das wärs gewesen. Aber ich muss zugeben, dass die Lösung von Chris und Martin mir noch besser gefällt.  
  
Grüße, Heinz