[JS/CSS] Display(CSS) Eigenschaften ändern mittels onClick erledigt

strolch00 · 2 März 2007

Hi @all,

Ich habe eine Seite mit mehrere p Abschnitten welche jewils eine id haben z.B.

HTML:

  <p id="news_1608">
....
  </p>

  <p id="news_1609">
....
  </p>
  <p id="news_1610">
....
  </p>
  <p id="news_1611">
....
  </p>

Zur Zeit habe ich es so, daß ich display: none; in den CSS deklariert habe, damit es anfangs ausgeblendet wird.
1. Wie kann ich mir eine if() konstruieren welche abfrägt ob dieses display noch auf none ist?
2. Wie kann ich wenn eine andere id angeklickt wird die letztere zuklappen?

zu Frage 1:
Mein Problem ist das ich net einfach schreiben kann

Code:

if(documen.getElementById('news_' + id).style.display == 'none')

weil das style-attribut nicht im Quelltext steht, es ist ja wie schon gesagt in den CSS deklariert und ich finde einfach keine Funktion mit der ich auf die CSS zugreifen kann. Entweder gibt es die nicht oder ich bin zu doof in dem Fall zu googlen.

zu Frage 2:
Ich will eine umständliche Schleife vermeiden, ich brauche praktisch einen Ansatz womit ich sagen kann schliese alle elemente die offen sind, wobei ich langsam glaube ohne schleife ist dies nicht möglich. Aber vielleicht kennt einer von euch eine Funktion mit der man sagen kann schliese alle Elemente p welche display: block haben? Mit className würde ich ja wieder bei einer Schleife rauskommen und ich müsste jedem p noch einen class geben.

Danke

*edit
mit getElementsByTagName würde ich ja auch wieder bei einer Schleife landen richtig?

ZeroCCC · 2 März 2007

da gibts nen ganz einfachen trick
anstatt style.display == 'none' prüfst du auf style.display != 'block'.

und die anderen kannste entweder per schleife schließen oder du merkst dir einfach das letzte geöffnete und wenn ein neues ellement sichtbar wird setzt du das alte wieder auf display = 'none';

strolch00 · 2 März 2007

Och man Zero das erste ist ja schon wieder fast zu simpel

danke.

Zu dem zweiten bleibt eine Variable welche ich in einer Funktion deklariere denn bestehen und ist die in JS global verfübar oder ist das wie in PHP? Ich muss leider gestehen mit JS bin ich net so bewandert was Variablen und laufzeiten angeht.

*edit
Ich habe es mal eben gestetet aber so wie meine funktion zur Zeit ist funktioniert das leider nicht.

Code:

function showNews( id )
{
   if(opend_id != undefined && id != opend_id)
      document.getElementById('news_' + opend_id).style.display = '';

   var opend_id = id;
   if(document.getElementById('news_' + id).style.display != 'block')
      document.getElementById('news_' + id).style.display = 'block';

   return false;
}

Wie kann ich mir denn die Variable merken? Das gefällt mir sehr gut da ich eben eine Schleife vermeiden will, aber ich willauch nicht mit Cookies anfangen zumal das warscheinlich eh nicht gehen wird.

*edit 2
Mir fällt grad ein das ich ja ein Feld welches nicht sichtbar ist definieren könnte, wo ich dann mit der Funktion immer die letzte id reinschreiben kann, aber ist sowas elegant?

theHacker · 2 März 2007

strolch00 schrieb:
Zu dem zweiten bleibt eine Variable welche ich in einer Funktion deklariere denn bestehen und ist die in JS global verfübar oder ist das wie in PHP?

Ne, Variablen, die außerhalb einer Funktion deklariert werden sind überall verfügbar. Funktionsvariablen nur in der Funktion.

PHP:

var globalVar = 3;

function foo()
{
  var localVar = 1;
  globalVar = 7; // ok
}

function bar()
{
  localVar = 3; // Fehler
  globalVar = 2; // ok
}

localVar = 4; // Fehler
globalVar = 8; // ok
foo(); bar();

Zum Edit2:
Ne, is totaler Mist. Einfach nur ne globale Variable setzen:

PHP:

var openID = null; // Am Anfang is gar keins offen

function onClick(clickedID)
{
  if(openID != null)
    closeNode(openID);

  openNode(clickedID);
  openID=clickedID;
}

Edit von mir:
Dein Vorschlag würde eh nicht gehen, weil du dann doppelte IDs hast

strolch00 · 2 März 2007

Ok alles klar und wenn ich dir richtig verstanden habe sollte ich es in meinemm Fall so machen,

Code:

var open_id = null; // Am Anfang is gar keins offen
function showNews( id )
{            alert(open_id);
   if(open_id != null && id != open_id)
      document.getElementById('news_' + opend_id).style.display = '';

   var open_id = id;
   if(document.getElementById('news_' + id).style.display != 'block')
      document.getElementById('news_' + id).style.display = 'block';

   return false;
}

leider funktioniert das nicht.

*edit
Asso das alert(open_di); sagt jedesmal undefined.

theHacker · 2 März 2007

strolch00 schrieb:

Code:

var open_id = null; // Am Anfang is gar keins offen
function showNews( id )
{            alert(open_id);
   if(open_id != null && id != open_id)
      document.getElementById('news_' + opend_id).style.display = '[B][COLOR=SeaGreen]none[/COLOR][/B]';

[B][COLOR=Red]    var open_id = id; // <- falsch
[COLOR=SeaGreen]    open_id = id; // <- richtig[/COLOR]
[/COLOR][/B]    if(document.getElementById('news_' + id).style.display != 'block')
      document.getElementById('news_' + id).style.display = 'block';

   return false;
}

Nicht nochmal erneut deklarieren :!:

Einfach nur benutzen.
Hat man davon, wenn man von PHP kommt und nie gelernt hat, ne Variable zu deklarieren

P.S. Ich würde im Erfolgsfall true zurückgeben

edit:
Du musst auf none setzen zum Verstecken.

strolch00 · 2 März 2007

Och meine Fresse des is aber auch verwirrend :biggrin:

.

Ne das false ist beabsichtigt, wobei das auch ein Teil der Funktion ist was nicht funktioniert. Ich will wegen SEO und Pagerank eigentlich den Link so haben

HTML:

<a href="show_news,[NID].html" onclick="showNews([NID]);" title="News lesen"><img src="/images/ico/newspaper_go.png" alt="News lesen" /></a>

weil wie man hier unter Erläuterung liest soll ein zurückgegebenes false verhindern das der eigentliche Link aufgerufen wird. Deswegen ist das return false; drin. Jedoch funktioniert der link nur so

HTML:

<a href="show_news,[NID].html" onclick="showNews([NID]); return false" title="News lesen"><img src="/images/ico/newspaper_go.png" alt="News lesen" /></a>

vielleicht weis da auch noch jemand rat.

Das return false, direkt im HTML Quelltext soll google angeblich abwertend beurteilen und den PR nicht an die Unterseite vererben, deswegen habe ich mich für diese Schreibweise entschieden.

theHacker · 2 März 2007

Die unterschiedlichen Schreibweisen sind ja auch grundliegend verschieden.
Das "return false;" in der Funktion kannst du dir komplett sparen, wenn du den Funktionswert nicht nutzst.

Wenn du die Funktionalität von SelfHTML haben willst, muss das return in den Link mitrein; also die untere Variante.

strolch00 · 2 März 2007

Also bekomme ich es so nicht hin mit einem return false; in der Funktion das der Link nicht aufgerufen wird. Im Klartext habe ich zwei möglichkeiten:
1. auf die Unterseite verzichten mittels # im href="" und irgendwo anders den link mit der ID setzen. oder
2. das PR SEO gedöns net beachten.

Richtisch??
Btw. Danke nu funktioniert soweit alles so wie ich es brauche. Perfekt :kiss:

*edit
Noch eine Frage am Rande welche aber nicht wichtig ist:
Kann ich mit JavaScript das style attribut wieder komplett entfernen, wenn ich das display: block wieder zurücksetze? Weil zur Zeit steht dann entweder oder im Quelltext. Ist nur noch eine für meine Begriffe Schönheitskorrektur.

ZeroCCC · 2 März 2007

strolch00 schrieb:
Noch eine Frage am Rande welche aber nicht wichtig ist:
Kann ich mit JavaScript das style attribut wieder komplett entfernen, wenn ich das display: block wieder zurücksetze? Weil zur Zeit steht dann entweder oder im Quelltext. Ist nur noch eine für meine Begriffe Schönheitskorrektur.

das leigt an deinem browser und hat nix mit dem eigentlichen quelltext zu tun. also ignorier es...

und wenn dich das onclick zeug stört dann lass es doch einfach weg... du kannst auch mittels javascript onclick eventhandler für die links erstellen.

tleilax · 2 März 2007

Ich steh bei sowas ja total auf Prototype. Dadurch kann man die ganze Funktion auf eine einzige Zeile kürzen und braucht keine Hilfsvariable:

Code:

function showNews( id )
{
  $(id).show().siblings().invoke('hide');
}

Muss man halt bloss überlegen, ob der "Overhead" von 70k sich lohnt. Aber je mehr JavaScript Du einsetzst, desto mehr wirst Du Prototype lieben lernen.

Achja:

Damit das Beispiel funktioniert, müssen die ganzen in einem eigenen Container liegen, aber das sollte das kleinste Problem sein.

strolch00 · 2 März 2007

@Zero

Also deinen letzten Satz habe ich gar nicht verstanden mit den Eventhandlern. Was meinst du damit.
Das mit dem style ja kann sein ich nutze FF 2.0.0.2, von daher kann es mir egal sein ich lasse zur Zeit einfach das style attribut leer beim zurücksetzen. Nach dem neuladen der Seite ist des ja eh weg, wie gesagt war nur ne Schönheitsfrage gewesen.

@tleilax ja Prototype is ne feine sage aber für meine 5 oder 6 Funktionen ist der das too much

, trotzdem danke für den hinweis.

theHacker · 2 März 2007

strolch00 schrieb:
@Zero

Also deinen letzten Satz habe ich gar nicht verstanden mit den Eventhandlern. Was meinst du damit.

Du kannst statt

HTML:

<a href="#" id="myid" onclick="foo()">Link</a>

auch das machen:

HTML:

<a href="#" id="myid">Link</a>

<script>
document.getElementById("myid").onclick="foo()";
</script>

tleilax · 2 März 2007

Was ZeroCCC damit meinst, ist vermutlich, dass Du nicht zwingend dem Element im HTML ein Onclick mitgeben musst, sondern dass Du diesen Eventhandler auch per JavaScript hinzufügen kannst.

Code:

document.getElementById('foobar').addEventListener('click', function() { alert('click'); });

Oder so in der Art. Da musst Du auch zwischen verschiedenen Browser unterscheiden. Mal heisst es addEventListener(), mal attachEvent().

Auch dafür empfehle ich Prototype:

Code:

$('foobar').observe('click', function() { alert('click'); });

strolch00 · 2 März 2007

Ah jetzt versteh ich was ihr meint

. Stimmt daran hatte ich noch gar nicht gedacht bzw. in erwägung gezogen, aber dann habe wir das wieder das problem mit dem return false. Richtig, oder würde das in diesem Fall gehen?

Mal sehen ich geh erstmal einkaufen dann wird gebastelt.

[JS/CSS] Display(CSS) Eigenschaften ändern mittels onClick erledigt

strolch00

redraft.de

ZeroCCC

wasn das?

strolch00

redraft.de

theHacker

sieht vor lauter Ads den Content nicht mehr

strolch00

redraft.de

theHacker

sieht vor lauter Ads den Content nicht mehr

strolch00

redraft.de

theHacker

sieht vor lauter Ads den Content nicht mehr

strolch00

redraft.de

ZeroCCC

wasn das?

tleilax

be forever curious

strolch00

redraft.de

theHacker

sieht vor lauter Ads den Content nicht mehr

tleilax

be forever curious

strolch00

redraft.de

Ähnliche Themen

[JS/CSS] Display(CSS) Eigenschaften ändern mittels onClick **erledigt**

redraft.de

wasn das?

redraft.de

sieht vor lauter Ads den Content nicht mehr

redraft.de

sieht vor lauter Ads den Content nicht mehr

redraft.de

sieht vor lauter Ads den Content nicht mehr

redraft.de

wasn das?

be forever curious

redraft.de

sieht vor lauter Ads den Content nicht mehr

be forever curious

redraft.de

Ähnliche Themen

[JS/CSS] Display(CSS) Eigenschaften ändern mittels onClick erledigt