kostenloser Webspace werbefrei: lima-city


Javascript alle IDs mit Teilstring ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    plugboard

    plugboard hat kostenlosen Webspace.

    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> &nbsp; </div>
    <div id="test2" class="ibox">(2) Text text Text text Text text Text text Text text <br> <br> &nbsp; </div>
    <div id="test3" class="ibox">(3) Text text Text text Text text Text text Text text <br> <br> &nbsp; </div>
    <div id="test4" class="ibox">(4) Text text Text text Text text Text text Text text <br> <br> &nbsp; </div>
    <div id="test5" class="ibox">(5) Text text Text text Text text Text text Text text <br> <br> &nbsp; </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> &nbsp; </div>
    <div id="test_aublauf" class="ibox">(2) Text text Text text Text text Text text Text text <br> <br> &nbsp; </div>
    <div id="test_lalala" class="ibox">(4) Text text Text text Text text Text text Text text <br> <br> &nbsp; </div>
    <div id="test_info" class="ibox">(5) Text text Text text Text text Text text Text text <br> <br> &nbsp; </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 !?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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>
  4. Autor dieses Themas

    plugboard

    plugboard hat kostenlosen Webspace.

    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()
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    plugboard schrieb:
    die DIV-ID Namen in array ablegen

    und dann einfach hideAll() ausführen
    bevor man showElement(id) ausführt
    Richtig, zuerst versteckst du alle Elemente, danach blendest du das eine wieder ein.

    plugboard schrieb:
    ... Idee ... bei erstellen der DIVs (per PHP)
    auch gleich das DIV-ID-Namen Array für JS erstellen
    Wenn du das sowieso mit PHP machst vereinfacht das die Sache natürlich...

    plugboard schrieb:
    Frage ... definiert man Array in JavaScript einfach so
    var elemente = ['element1', 'element2', 'element3']
    ... das geht ? ... dachte es muss mit new Array()
    In JavaScript kannst du Arrays und Objekte auf verschiedene Arten definieren...
    var array = ['element 0', 'element 1', 'element 2'];
    das funktioniert und resultiert in einem normalen Array.
    var objekt = {"name":"wert","property","value"};
    funktioniert auch, resultiert in einem assoziativen Array mit folgendem Inhalt:
    objekt["name"] = "wert";
    objekt["property"] = "value";

    Ein Objekt ist in JavaScript nicht mehr als ein assoziatives Array, deshalb funktioniert das mit
    new Array()
    genauso.

    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.
  6. 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>
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!