nicht angemeldet
Via Select/Options und style.display Container ein-/ausblenden
Hallo zusammen,
ich bräuchte dringend Hilfe bei einem Script, weil es da mit meinen JavaScript Kenntnissen zu Ende geht...
Und zwar geht es darum, dass ich gerne über ein "<select><option>..." Dropdown den Style mehrerer HTML-Elemente auf "display: block" bzw. "display: none" ändern würde, sodass ich dort mehrere Sprachen auflisten kann und immer nur die Elemente mit entsprechenden Sprachinhalten sichtbar sind. Bemerkt sei außerdem, dass das ganze für ein eBay-Layout ist und auf deren eingeschränkten JavaScript-Möglichkeiten laufen sollte.
Momentan will es aber nicht funktionieren und ich weiß nicht wirklich warum...
Hier der komplette Quelltext:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Language Script</title>
<style type="text/css">
<!--
.intl {
display: none;
}
-->
</style>
<script type="text/javascript">
<!--
/* <![CDATA[ */
function $(e) {
return (document.getElementById(e));
}
function $S(e) {
return (document.getElementById(e).style.display = 'block');
}
var localization = 'en';
function change(language) {
if (language.options[0].selected) {
localization = 'en';
} else if (language.options[1].selected) {
localization = 'de';
}
}
/* ]]> */
//-->
</script>
</head>
<body>
<!-- English -->
<p class="intl" id="lang_en">
Language:
</p>
<!-- German -->
<p class="intl" id="lang_de">
Sprache:
</p>
<form method="post" action="">
<select name="language" onchange="change(this);">
<option selected>English</option>
<option>Deutsch</option>
</select>
</form>
<hr />
<!-- English -->
<div class="intl" id="text_en">
English text goes here.
</div>
<!-- German -->
<div class="intl" id="text_de">
Deutscher Text, bla bla.
</div>
<script type="text/javascript">
<!--
/* <![CDATA[ */
$S('lang_' + localization);
$S('text_' + localization);
/* ]]> */
//-->
</script>
</body>
</html>
Wäre super wenn mir da jemand weiterhelfen könnte!
Vielen Dank schonmal!!
-
Ich verstehe deinen Code zwar nicht, bzw. wie und warum du ihn so zusammensetzt, aber egal.
Hier ein einfaches Beispiel:
<html> <head> [code lang=css] <style type="text/css"> #DE { display:none; color:red; } #EN { display:none; color:lime; } </style><script type="text/javascript"> function setLngText(objValue) { if(objValue == "DE") { document.getElementById("DE").style.display = "block"; document.getElementById("EN").style.display = "none"; } else if(objValue == "EN") { document.getElementById("EN").style.display = "block"; document.getElementById("DE").style.display = "none"; } else { document.getElementById("EN").style.display = "none"; document.getElementById("DE").style.display = "none"; } } </script></head>
<body>
<center>
<select id="LngSelect" size="1" onchange="setLngText(this.value);">
<option value="--">-------</option>
<option value="DE">Deutsch</option>
<option value="EN">English</option>
</select>
<br /><br /><br />
<div id="DE">Hier steht der Text auf Deutsch</div>
<div id="EN">Here is the text in English</div>
</center>
</body>
</html>
[/code]-
Ich verstehe deinen Code zwar nicht, bzw. wie und warum du ihn so zusammensetzt, aber egal.
Ja, ich hab da einen Denkfehler drin gehabt... ;)
Bin irgendwie auf die Idee gekommen nur die Variable zu verändern, was natürlich nichts am DOM bewirkt.
Mit einem ähnlichen Script, wie dem von dir, habe ich es auch schon versucht. Mein Problem ist allerdings, dass ich mit dem wechseln zwischen den Einträgen "Deutsch" und "English" im Dropdown nicht nur eine ID ausblenden und eine andere ID einblenden möchte, sondern jeweils mehrere Elemente auf der gesamten Seite verteilt.
Ich habe meine Vorstellung mal im Quelltext mit Kommentaren dargestellt:
<script type="text/javascript"> <!-- /* Ja ich weiß, das Dollarzeichen verträgt sich nicht mit Frameworks wie MooTools oder jQuery... Diese Funktion holt alle Elemente über die ID. Beispiel: $('myID'); // Spricht id="myID" an. Wenn "var localization" auf "= 'de'" geändert wird, ist nur der Inhalt auf Deutsch sichtbar. Dieses Umwechseln im DOM, würde ich gern über ein Dropdown mit 2 Optionen (English & Deutsch) ermöglichen. */ function $(e) { return (document.getElementById(e).style.display = 'block'); } var localization = 'en'; //--> </script> <!-- ### Wechselnder Inhalt 1 ### --> <!-- English --> <div id="first_en" style="display:none"> English content 1. </div> <!-- German --> <div id="first_de" style="display:none"> Deutscher Inhalt 1. </div> <hr /> <!-- ### Wechselnder Inhalt 2 ### --> <!-- English --> <div id="second_en" style="display:none"> English content 2. </div> <!-- German --> <div id="second_de" style="display:none"> Deutscher Inhalt 2. </div> <hr /> <!-- ### Wechselnder Inhalt 3 ### --> <!-- English --> <div id="third_en" style="display:none"> English content 3. </div> <!-- German --> <div id="third_de" style="display:none"> Deutscher Inhalt 3. </div> <hr /> <!-- ### Einlesen der Inhalte ### --> <script type="text/javascript"> <!-- /* Die Variable localization bestimmt, ob das Element mit "de" oder "en" auf "display: block;" umgestellt wird. Momentan wird nur "first_en", "second_en" usw. angezeigt, weil oben "var localization = 'en';" vorgegeben ist. Diese Vorgabe, ob nur die Elemente mit der Endung "en" oder nur die Elemente mit der Endung "de" auf "display: block;" gestellt werden, würde ich gern über "<select><option>..." beeinflussen, sodass wenn man "English" auswählt, nur die Elemente mit der Endung "en" angezeigt werden und umgekehrt, wenn man "Deutsch" auswählt, nur die Elemente mit der Endung "de" sichtbar sind. Wenn ich allerdings nur die Variable "localization" über eine onChange-Funktion überschreibe, verändert sich nichts im DOM. */ $('first_' + localization); $('second_' + localization); $('third_' + localization); //--> </script> <!-- ### Dropdown zum Umschalten ### --> <select name="language" onchange="choose(this)"> <option selected>English</option> <option>Deutsch</option> </select>-
[latex]Mae govannen![/latex]
Ja, ich hab da einen Denkfehler drin gehabt... ;)
Da ist noch einer: dein gesamtes Konzept...
$('first\_' + localization); $('second\_' + localization); $('third\_' + localization);... denn irgendwann stehen hier ggf. 258 Aufrufe zu 258 Elementen. Benutze stattdessen Klassen, dann kannst du mit einem Funktionsaufruf eine gleichzeitige Umschaltung aller Elemente bewerkstelligen.
Also im HTML z.B. so:
<style type="text/css"> .en {display: none;} .de {display: none;} /* Wobei es hier sinnvoller wäre, die im Select-Element standardmäßig vorgewählte Sprache auch direkt auf sichtbar zu schalten */ </style> <!-- ### Wechselnder Inhalt 1 ### --> <!-- English --> <div class="en"> English content 1. </div> <!-- German --> <div class="de"> Deutscher Inhalt 1. </div>In der Javascript-Funktion sammelst du nun alle Elemente ein, die z.B. die Klasse en haben ( .getElementsByClassName, in diversen Browsern schon eingebaut, für die Anderen gibt es das als JS-Funktion im Forum-Archiv und Netz) und kannst dann in einer Schleife die Style-Eigenschaft entsprechend setzen.
Oder besser, damit man nicht alle Elemente durchrattern muß:
<style type="text/css"> .hide {display: none;} </style> <!-- ### Wechselnder Inhalt 1 ### --> <!-- English --> <div class="en hide"> English content 1. </div> <!-- German --> <div class="de hide"> Deutscher Inhalt 1. </div> <!-- Wobei es hier sinnvoller wäre, die im Select-Element standardmäßig vorgewählte Sprache auch direkt auf sichtbar zu schalten -->Wie gehabt sammelst du nun alle Elemente ein, die z.B. die Klasse en haben und fügst die Klasse hide hinzu oder entfernst sie wieder .
(auch dazu gibt es diverse fertige Versionen im Forum-Archiv und Netz, vielfach mit Suchbegriffen wie addClass, removeClass und hasClass zu finden)Cü,
Kai
--
„It's 106 miles to Chicago, we got a full tank of gas, half a pack of cigarettes, it's dark, and we're wearing sunglasses“.
„Hit it!“
Selfzeugs
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
-
-