Javascript alle IDs mit Teilstring ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ablegen
array
assoziativen array
blocken
code
display
element
erstellen
folgendem inhalt
frage
http
idee
objekt
show
test
text
url
verschiedene arten
wert objekt
zahl
-
Hallo
ich habe mehrere DIVs deren IDs jeweils einen gleichen Teilstring enthalten
hier im Beilspiel ist der Teilstring: 'test'
wie kann ich mit Javascript alle DIVs behandeln, die den gesuchten Teilstring in ID enthalten?
wenn ich nur Zahlen an den Teilstring anhänge, dann bekomme ich es hin
nur die ausgewählte DIV ID wird angezeiht, alle anderen werden ausgeblendet
<html> <head> <title>DIV BOX TEST</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .ibox { display: none; } --> </style> <script type="text/javascript"> function show(div_id) { for (var zaehler = 1; zaehler <= 5; zaehler++) { if (document.getElementById("test" + zaehler).style.display == "block") { document.getElementById("test" + zaehler).style.display = "none"; } } document.getElementById(div_id).style.display = "block"; } </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <br> <br> <br> --- <a href="javascript:show('test1');">Show 1</a> <br> --- <a href="javascript:show('test2');">Show 2</a> <br> --- <a href="javascript:show('test3');">Show 3</a> <br> --- <a href="javascript:show('test4');">Show 4</a> <br> --- <a href="javascript:show('test5');">Show 5</a> <br> <br> <div id="test1" class="ibox">(1) Text text Text text Text text Text text Text text <br> <br> </div> <div id="test2" class="ibox">(2) Text text Text text Text text Text text Text text <br> <br> </div> <div id="test3" class="ibox">(3) Text text Text text Text text Text text Text text <br> <br> </div> <div id="test4" class="ibox">(4) Text text Text text Text text Text text Text text <br> <br> </div> <div id="test5" class="ibox">(5) Text text Text text Text text Text text Text text <br> <br> </div> <br> <br> <br> </body> </html>
das funktioniert, weil ich test<fortlaufende Zahl> habe
aber was kann ich machen, wenn ich anstatt test1, test2, test3, ... usw
keine Zahlen sondern sowas habe wie test_data, test_info, test_mehr, ... usw. ...
BSP:
<div id="test_abc" class="ibox">(1) Text text Text text Text text Text text Text text <br> <br> </div> <div id="test_aublauf" class="ibox">(2) Text text Text text Text text Text text Text text <br> <br> </div> <div id="test_lalala" class="ibox">(4) Text text Text text Text text Text text Text text <br> <br> </div> <div id="test_info" class="ibox">(5) Text text Text text Text text Text text Text text <br> <br> </div>
so dass alle DIVs ausgeblendet werden, ausser das aktive (per Klick ausgewählte)
also irgendwie Teilstring 'test' finden und auf alle anwenden, ausser aktve ID (z.B: test_info)
?
bzw. egal, kann ja alle mit test als Teilstring in ID ausblenden, (display:none;)
das aktive wird dann ja wieder eingeblendet (display:block;)
... also ... wie Teilstring aus der div_id finden? ... oder ganz anders rann-gehen?
.... HELP !?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also mal als Denkanstoß von hier:
<script type="text/javascript"><!-- var elemente = ['row_bild1', 'row_bild2', 'row_bild3']; // Element-IDs function showElement(id) { var element = document.getElementById(id); element.style.display = ''; // oder 'block' ... } function hideElement(id) { var element = document.getElementById(id); element.style.display = 'none'; } function showAll() { for(var i = 0; i < elemente.length; i++) showElement(elemente[i]); } function hideAll() { for(var i = 0; i < elemente.length; i++) hideElement(elemente[i]); } // --></script> -
oh .. gute Idee
die DIV-ID Namen in array ablegen
und dann einfach hideAll() ausführen
bevor man showElement(id) ausführt
aber meine DIV-ID Namen sind nicht immer gleich
es können im 2tem Teil (nach prefix-Teilstring) auch mal Usernamen bzw User-IDs sein
... Idee ... bei erstellen der DIVs (per PHP)
auch gleich das DIV-ID-Namen Array für JS erstellen
mal sehen ob ich das hinbekomme
Frage ... definiert man Array in JavaScript einfach so
var elemente = ['element1', 'element2', 'element3']
... das geht ? ... dachte es muss mit new Array()
-
plugboard schrieb:
Richtig, zuerst versteckst du alle Elemente, danach blendest du das eine wieder ein.
die DIV-ID Namen in array ablegen
und dann einfach hideAll() ausführen
bevor man showElement(id) ausführt
plugboard schrieb:
Wenn du das sowieso mit PHP machst vereinfacht das die Sache natürlich...
... Idee ... bei erstellen der DIVs (per PHP)
auch gleich das DIV-ID-Namen Array für JS erstellen
plugboard schrieb:
In JavaScript kannst du Arrays und Objekte auf verschiedene Arten definieren...
Frage ... definiert man Array in JavaScript einfach so
var elemente = ['element1', 'element2', 'element3']
... das geht ? ... dachte es muss mit new Array()
das funktioniert und resultiert in einem normalen Array.var array = ['element 0', 'element 1', 'element 2'];
funktioniert auch, resultiert in einem assoziativen Array mit folgendem Inhalt:var objekt = {"name":"wert","property","value"};objekt["name"] = "wert"; objekt["property"] = "value";
Ein Objekt ist in JavaScript nicht mehr als ein assoziatives Array, deshalb funktioniert das mit
genauso.new Array()
Noch ein bisschen mehr Info zum Thema gibt es hier.
Dort wird auch gezeigt wie du ein Array aus PHP direkt in JavaScript übernehmen kannst. -
Am einfachsten geht so was mit jQuery.
Dein <script>-Tag mit folgenden Code austauschen:
<script src="http://code.jquery.com/jquery-latest.min.js" language="javascript" type="text/javascript"></script> <script type="text/javascript"> function show(div_id) { //Alle Elemente, bei denen die ID mit "test" beginnt, werden ausgeblendet (display:none;) $("[id^='test']").hide(); //Die von dir übergebene ID wird angezeigt (display:block;) $("#" + div_id).show(); /* Oder als Einzeiler: $("[id^='test']").not($("#" + div_id).show()).hide(); */ } </script> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
