kostenloser Webspace werbefrei: lima-city


Tabellenreihen per Klick ein-/ausblenden Javascript

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    php-oop

    php-oop hat kostenlosen Webspace.

    Hallo !

    Ich habe in etwa so eine HTML Tabelle:

    <table border="0">
    ....
    			<tr>
    				<td width="29%">Bildurl:</td>
    				<td width="71%"><input type="text" name="bildurl" size="72"
    					style="width: 600px;" /></td>
    			</tr>
    			<tr id="row_bild2">
    				<td width="29%">Weitere Bildurls:</td>
    				<td width="71%"><input type="text" name="bild2" size="72"
    					style="width: 600px;" /></td>
    			</tr>
    			<tr id="row_bild3">
    				<td width="29%"></td>
    				<td width="71%"><input type="text" name="bild3" size="72"
    					style="width: 600px;" /></td>
    			</tr>
    			<tr id="row_bild4">
    				<td width="29%"></td>
    				<td width="71%"><input type="text" name="bild4" size="72"
    					style="width: 600px;" /></td>
    			</tr>
    			<tr>
    				<td width="29%">Zustand:</td>
    				<td width="71%"></td>
    			</tr>
    			<tr>
    				<td width="29%"></td>
    				<td width="71%"></td>
    			</tr>
    .......


    Die Reihen:

    <tr id="row_bild2">
    				<td width="29%">Weitere Bildurls:</td>
    				<td width="71%"><input type="text" name="bild2" size="72"
    					style="width: 600px;" /></td>
    			</tr>
    			<tr id="row_bild3">
    				<td width="29%"></td>
    				<td width="71%"><input type="text" name="bild3" size="72"
    					style="width: 600px;" /></td>
    			</tr>
    			<tr id="row_bild4">
    				<td width="29%"></td>
    				<td width="71%"><input type="text" name="bild4" size="72"
    					style="width: 600px;" /></td>
    			</tr>


    will ich mit Javascript bei Klick ein- und ausblenden. Also per Klick einblenden, wenn man dann nochmal klickt ausblenden.

    Wie mache ich das? Bei Google habe ich schon lange nach meinem Problem gesucht, aber nichts gefunden.

    Könnt Ihr mir helfen?

    Beitrag zuletzt geändert: 24.4.2012 17:20:33 von php-oop
  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.

    Könnte so funktionieren:
    <script type="text/javascript"><!--
    	function show(id) {
    		var element = document.getElementById(id);
    		element.style.display = 'inline'; // oder 'block' ...
    	}
    	function hide(id) {
    		var element = document.getElementById(id);
    		element.style.display = 'none';
    	}
    // --></script>
    Reihe row_bild2 <a href="#" onclick="hide('row_bild2');">verstecken</a>
    Willst du das auch noch toggeln?
  4. Autor dieses Themas

    php-oop

    php-oop hat kostenlosen Webspace.

    hackyourlife schrieb:
    Könnte so funktionieren:
    <script type="text/javascript"><!--
    	function show(id) {
    		var element = document.getElementById(id);
    		element.style.display = 'inline'; // oder 'block' ...
    	}
    	function hide(id) {
    		var element = document.getElementById(id);
    		element.style.display = 'none';
    	}
    // --></script>
    Reihe row_bild2 <a href="#" onclick="hide('row_bild2');">verstecken</a>
    Willst du das auch noch toggeln?


    Danke für deine Antwort !
    Was ist "toggeln"?

    Ich will aber die drei Zeilen aufeinmal ein- oder ausblenden, also die hier:

    <tr id="row_bild2">
    				<td width="29%">Weitere Bildurls:</td>
    				<td width="71%"><input type="text" name="bild2" size="72"
    					style="width: 600px;" /></td>
    			</tr>
    			<tr id="row_bild3">
    				<td width="29%"></td>
    				<td width="71%"><input type="text" name="bild3" size="72"
    					style="width: 600px;" /></td>
    			</tr>
    			<tr id="row_bild4">
    				<td width="29%"></td>
    				<td width="71%"><input type="text" name="bild4" size="72"
    					style="width: 600px;" /></td>
    			</tr>


    Wie kann ich das machen?

    EDIT: Ich habe dein Script gerade ausprobiert. Es klappt, das eine Tabellenreihe ausgeblendet wird, aber es sollen die o.g. 3 Reihen ausgeblendet werden.
    Und mit Klick auf einen Link sollen die Reihen ein- oder ausgeblendet werden. Nicht nur ausgeblendet.

    Beitrag zuletzt geändert: 24.4.2012 18:19:56 von php-oop
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    php-oop schrieb:
    Was ist "toggeln"?
    Wenn du einmal auf den Knopf drückst verschwindet es, beim zweiten Mal erscheint es wieder; das nennt man "toggeln".

    php-oop schrieb:
    Ich will aber die drei Zeilen aufeinmal ein- oder ausblenden, also die hier:

    Also das was du noch haben möchtest:
    <script type="text/javascript"><!--
    	var elemente = ['row_bild1', 'row_bild2', 'row_bild3'];
    	function showElement(id) {
    		var element = document.getElementById(id);
    		element.style.display = 'inline'; // 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>
    Alle <a href="#" onclick="hideAll();">verstecken</a>
    Alle <a href="#" onclick="showAll();">anzeigen</a>
  6. Autor dieses Themas

    php-oop

    php-oop hat kostenlosen Webspace.

    hackyourlife schrieb:
    php-oop schrieb:
    Was ist "toggeln"?
    Wenn du einmal auf den Knopf drückst verschwindet es, beim zweiten Mal erscheint es wieder; das nennt man "toggeln".

    php-oop schrieb:
    Ich will aber die drei Zeilen aufeinmal ein- oder ausblenden, also die hier:

    Also das was du noch haben möchtest:
    <script type="text/javascript"><!--
    	var elemente = ['row_bild1', 'row_bild2', 'row_bild3'];
    	function showElement(id) {
    		var element = document.getElementById(id);
    		element.style.display = 'inline'; // 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>
    Alle <a href="#" onclick="hideAll();">verstecken</a>
    Alle <a href="#" onclick="showAll();">anzeigen</a>


    Danke, aber ich will einen Link zum verstecken UND zum anzeigen.

    Achso, das ist toggeln
    Ja, so will ich es gerne haben.
    Das man mit einem Klick die Reihen einblendet und beim nächsten Klick ausblendet.

    Kannst du das Script noch so umbauen? Das wäre nett.
  7. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    php-oop schrieb:
    Danke, aber ich will einen Link zum verstecken UND zum anzeigen.

    Achso, das ist toggeln
    Ja, so will ich es gerne haben.
    Das man mit einem Klick die Reihen einblendet und beim nächsten Klick ausblendet.
    <script type="text/javascript"><!--
    	var elemente = ['row_bild1', 'row_bild2', 'row_bild3']; // hier gehören die Element-IDs rein
    	function toggleElement(id) {
    		var element = document.getElementById(id);
    		if(element.style.display == 'none')
    			element.style.display = 'inline'; // oder 'block' ...
    		else
    			element.style.display = 'none';
    	}
    	function toggleAll() {
    		for(var i = 0; i < elemente.length; i++)
    			toggleElement(elemente[i]);
    	}
    // --></script>
    Alle <a href="#" onclick="toggleAll();">togglen</a>
  8. Autor dieses Themas

    php-oop

    php-oop hat kostenlosen Webspace.

    hackyourlife schrieb:
    php-oop schrieb:
    Danke, aber ich will einen Link zum verstecken UND zum anzeigen.

    Achso, das ist toggeln
    Ja, so will ich es gerne haben.
    Das man mit einem Klick die Reihen einblendet und beim nächsten Klick ausblendet.
    <script type="text/javascript"><!--
    	var elemente = ['row_bild1', 'row_bild2', 'row_bild3']; // hier gehören die Element-IDs rein
    	function toggleElement(id) {
    		var element = document.getElementById(id);
    		if(element.style.display == 'none')
    			element.style.display = 'inline'; // oder 'block' ...
    		else
    			element.style.display = 'none';
    	}
    	function toggleAll() {
    		for(var i = 0; i < elemente.length; i++)
    			toggleElement(elemente[i]);
    	}
    // --></script>
    Alle <a href="#" onclick="toggleAll();">togglen</a>


    Ich habe das Script gerade getestet. Aber irgendwie tut sich noch garnichts.
    Beim Klick auf den Link passiert nichts. Ist im Script vielleicht noch ein Fehler drin?
  9. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    php-oop schrieb:
    Ich habe das Script gerade getestet. Aber irgendwie tut sich noch garnichts.
    Beim Klick auf den Link passiert nichts. Ist im Script vielleicht noch ein Fehler drin?
    Ok, es war ungetestet und hat 2 Fehler...
    das ganze Script nochmal, diesmal funktioniert es:
    <script type="text/javascript"><!--
    	var elemente = ['row_bild2', 'row_bild3', 'row_bild4']; // hier gehören die Element-IDs rein
    	function toggleElement(id) {
    		var element = document.getElementById(id);
    		if(element.style.display == 'none')
    			element.style.display = ''; // oder 'block' ...
    		else
    			element.style.display = 'none';
    	}
    	function toggleAll() {
    		for(var i = 0; i < elemente.length; i++)
    			toggleElement(elemente[i]);
    	}
    // --></script>
    Alle <a href="#" onclick="toggleAll();">togglen</a>
  10. Autor dieses Themas

    php-oop

    php-oop hat kostenlosen Webspace.

    hackyourlife schrieb:
    php-oop schrieb:
    Ich habe das Script gerade getestet. Aber irgendwie tut sich noch garnichts.
    Beim Klick auf den Link passiert nichts. Ist im Script vielleicht noch ein Fehler drin?
    Ok, es war ungetestet und hat 2 Fehler...
    das ganze Script nochmal, diesmal funktioniert es:
    <script type="text/javascript"><!--
    	var elemente = ['row_bild2', 'row_bild3', 'row_bild4']; // hier gehören die Element-IDs rein
    	function toggleElement(id) {
    		var element = document.getElementById(id);
    		if(element.style.display == 'none')
    			element.style.display = ''; // oder 'block' ...
    		else
    			element.style.display = 'none';
    	}
    	function toggleAll() {
    		for(var i = 0; i < elemente.length; i++)
    			toggleElement(elemente[i]);
    	}
    // --></script>
    Alle <a href="#" onclick="toggleAll();">togglen</a>


    Hi!

    So funktioniert es, danke!
    Geht es auch, dass, wenn man auf die Seite kommt, die Felder versteckt sind, nicht schon eingeblendet sind?
    Also andersrum als jetzt?
  11. ja geht wenn du folgendes machst:

    <tr style="display:none">
    und dann halt statt display:none im javascript block machst!

    Lg.
  12. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    sawei3 schrieb:
    und dann halt statt display:none im javascript block machst!
    Fast: das Javascript muss so bleiben wie es ist, ansonsten stimmt es...
  13. Autor dieses Themas

    php-oop

    php-oop hat kostenlosen Webspace.

    hackyourlife schrieb:
    sawei3 schrieb:
    und dann halt statt display:none im javascript block machst!
    Fast: das Javascript muss so bleiben wie es ist, ansonsten stimmt es...


    Danke euch beiden!

    Habs eben getestet, und es klappt alles wunderbar!
    Danke nochmal!
  14. Hallo @ all,

    dieser Beitrag hat mir schon sehr geholfen. Ich habe den Code von hackyourlife auf meine Seite angewandt und er funktioniert einwandfrei. Jetzt habe ich aber das Problem, dass ich mehrere Buttons habe, die unterschiedliche Zeilen ausblenden sollen. Mit dem Code theoretisch kein Problem, aber er ändert nur den Style der Zeilen.

    Gibt es einen Befehl/Code der die Zeilen vor dem ausführen neuer Befehle erst einmal in den Urzustand versetzt???

    Vielen Dank und beste Grüße
  15. Was genau ist das Problem? Wenn du für jeden Button eine Liste an id's bereitstellst, sollte alles funktionieren. Oder hast du Zeilen, die von mehr als einem Button betroffen sind?

    wadolowski schrieb:
    Gibt es einen Befehl/Code der die Zeilen vor dem ausführen neuer Befehle erst einmal in den Urzustand versetzt???
    Wenn zu Beginn z.B. alle Zeilen sichtbar waren, dann ist es kein Problem per Skript auch wieder alle sichtbar zu machen.

    Wenn du uns Beispielcode zeigst oder hochlädst und verlinkst was du versucht hast, können wir besser helfen.
  16. prinz-und-gloeckner

    prinz-und-gloeckner hat kostenlosen Webspace.

    Hinsichtlich Zugänglichkeit und Barrierefreiheit scheint es mir deutlich sinnvoller zu sein, daß per Stilvorlage und ohne Java-Script umzusetzen.

    Dazu eignet sich gut die Pseudoklasse :target
    Ist etwas Ziel eines Verweises, so kann man dies anders dekorieren.
    Da es immer nur ein :target gibt, trifft die Dekoration auch nur auf ein Zielelement zu.
    Macht man etwas zuvor unsichtbar, so empfiehlt sich da die Kombination mit dem Negations-Selektor.

    Also in diesem Falle
    tr:not(:target) {display: none}
    tr:target {display: table-row}

    oder
    tr:not(:target) {height: 2em; overflow: auto}
    tr:target {height: auto}

    Sofern noch andere Tabellen im Dokument sind, die nicht so behandelt werden sollen, wäre zum Beispiel mit der Verwendung einer Klasse (Attribut class) bei den betroffenen Tabellen die Selektivität zu erhöhen:

    table.Klapptabelle tr:not(:target) etc


    Problematischer wäre es, etwa per :hover Eigenschaften wie die Höhe des Elementes von etwa 1em auf auto zu setzen, um es komplett sichtbar zu machen, weil es bei mobilen Geräten wohl Probleme mit :hover gibt.


    Auch bei der Verwendung von Skripten ist natürlich immer darauf zu achten, daß der Inhalt im Anfangszustand komplett sichtbar ist, die Veränderung oder Einschränkung immer mit der gleichen Technik erfolgt.
    Also nicht etwa mit CSS etwas erst unsichtbar machen und dann per Skript wieder hervorzaubern.
    Da wäre also entweder für beides CSS zu verwenden oder aber die Eigenschaften für unsichtbar/sichtbar werden konsequent per Skript gesetzt.

    <a href="#" ...> ist eine fehlerhafte Konstruktion. Nach dem # sollte immer ein existierender Fragmentidentifizierer folgen. Egal was ein Skript da später veranstalten mag, der Verweis muß ohne das Skript eine Funktion haben.

    Attribute wie onclick im (X)HTML sind inzwischen auch überholt, diese Ereignissen werden komplett im Skript über das DOM angesprochen, haben also mit dem Inhalt nichts zu tun.

  17. Hi @ all,

    vielen Dank erstmal für eure schnellen Antworten. Ich versuche mal mein Problem besser in Worte zu fassen.

    Ich habe mehrerer Zeilen in einer Tabelle. Ebenfalls habe ich mehrere Buttons die unterschiedliche Zeilen ausblenden sollen.
    Hier ein Auszug aus der Tabelle:
    <tr>
    					<td colspan='2' class='border1 column2 kopf2'><b>Logistik</b></td>
    					<td colspan='1' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='8' class='border1 column2'></td>
    					<td colspan='1' class='border1 column2'><img class='logo2' style='height: 40px; padding-left: 10px;' src='pictures/bugeleisen.jpg'/></td>
    				</tr>
                    <tr id='fmd'>
    					<td colspan='2' class='border1 column2 kopf2'><img class='logo2' style='height: 30px;' src='pictures/Damen.gif'/>&nbsp;<b>Model</b></td>
    					<td colspan='1' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='8' class='border1 column2'></td>
    					<td colspan='1' class='border1 column2'></td>
    				</tr>
                    <tr id='fmh'>
    					<td colspan='2' class='border1 column2 kopf2'><img class='logo2' style='height: 30px;' src='pictures/Herren.gif'/>&nbsp;<b>Model</b></td>
    					<td colspan='1' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='8' class='border1 column2'></td>
    					<td colspan='1' class='border1 column2'></td>
    				</tr>
                    <tr id='fp'>
    					<td colspan='2' class='border1 column2 kopf2'><b>Puppe</b></td>
    					<td colspan='1' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='8' class='border1 column2'></td>
    					<td colspan='1' class='border1 column2'></td>
    				</tr>
                    <tr id='ft1'>
    					<td colspan='2' class='border1 column2 kopf2'><b>Tisch</b></td>
    					<td colspan='1' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='8' class='border1 column2'></td>
    					<td colspan='1' class='border1 column2'></td>
    				</tr>
                    <tr id='ft2'>
    					<td colspan='2' class='border1 column2 kopf2'><b>Tisch</b><br><a class='subtitle'>front&nbsp;&amp;&nbsp;back</a></td>
    					<td colspan='1' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='8' class='border1 column2'></td>
    					<td colspan='1' class='border1 column2'></td>
    				</tr>
                    <tr id='ft3'>
    					<td colspan='2' class='border1 column2 kopf2'><b>Tisch</b><br><a style='font-size: 12px;'>Innenansicht</a></td>
    					<td colspan='1' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='2' class='border1 column2'></td>
    					<td colspan='8' class='border1 column2'></td>
    					<td colspan='1' class='border1 column2'></td>
    				</tr>


    Und hier ein Auszug aus dem bestehenden JS:
    'use strict';
    var LC1AW = ['fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Model + Puppe
    var LC1CW = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'fco1', 'fco2', 'fco3']; // Looklet + Puppe
    var LC1DW = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Puppe
    var LC1AM = ['fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Model + Puppe
    var LC1BM = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'fco1', 'fco2', 'fco3']; // Looklet + Puppe
            
    var LC2A = ['fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Model + Puppe
    var LC2B = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'fco1', 'fco2', 'fco3']; // Looklet + Puppe
    var LC2C = ['fmd', 'fp', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Model
    var LC2D = ['fmd', 'fmh', 'ft1', 'ft2', 'ft3', 'fl1', 'fl2', 'fo', 'fc', 'flo', 'fco1', 'fco2', 'fco3']; // Puppe

    Und der Code für zwei Buttons:
    function toggleElement(id) {
        var element = document.getElementById(id);
        if (element.style.display === 'none')
        element.style.display = ''; // oder 'block' ...
            else
            element.style.display = 'none';
    }
    function toggleLC1AW() {
        for(var i = 0; i < LC1AW.length; i++)
            toggleElement(LC1AW[i]);
    
        still.style.display = 'block';
        model.style.display = 'block';
        puppe.style.display = 'block';
        tisch.style.display = 'none';
        lege.style.display = 'none';
        orbit.style.display = 'none';
        cube.style.display = 'none';
        look.style.display = 'none';
    }
    function toggleLC1CW() {
        for(var i = 0; i < LC1CW.length; i++)
            toggleElement(LC1CW[i]);
    
        still.style.display = 'block';
        model.style.display = 'none';
        puppe.style.display = 'block';
        tisch.style.display = 'none';
        lege.style.display = 'none';
        orbit.style.display = 'none';
        cube.style.display = 'none';
        look.style.display = 'block';  
    }


    Was soll jetzt passieren:

    Dadurch das jeder Button eine andere Zeilenkombination anzeigen soll, soll nach dem Klick eines Buttons soll zuerst alle Tabellenzeilen wieder sichtbar sein und dann entsprechende ausgeblendet.

    Bei zwei Tabellenzeilen habe ich das Problem, das ein weiterer Button weitere Details vordefinieren soll.

    Beispiel:
    Button 1 = Damen
    Button 2 = Herren

    Button3 = Model

    Durch drücken von Button1 + Button3 wird die Zeile Model Damen angezeigt und durch Button2 + Button3 Model Herren.

    Ich habe schon vieles Ausprobiert, jedoch ohne Erfolg. Nun ist mein JS Wissen nicht so gut und deshalb hoffe ich auf eure Hilfe.

    Beste Grüße
    wadolowski

  18. Ich habe jetzt auf jsfiddle etwas versucht:
    https://jsfiddle.net/jzkeL5p9/13/

    Wenn man zuerst auf "Damen" drückt und dann auf "Model", wird die Zeile mit Model (Damen) eingeblendet und die Zeile mit Model (Herren) ausgeblendet. Drückt man zuerst auf "Herren" und dann auf "Model", verhält es sich umgekehrt.

    War das so gemeint?
  19. Hallo fuerderer,

    dein Ansatz ist schon fast richtig. Drei kleine Dinge noch:

    1. klappt es auch, das die Rheinfolge keine Rolle spielt. Also egal ob man erst Geschlecht und dann Model klickt oder umgekehrt?
    2. wie binde ich die restlichen reihen in den model-button ein?
    3. Wenn man auf Model klickt sollen erst alle Zeilen sichtbar sein und anschließend entsprechende ausgeblendet.

    Zu Punkt 2 werde ich auch selbst Versuche unternehmen, aber es ist mir lieber wenn auch ein Fachmann sich dessen annimmt.

    Vielen Dank für das schon geleistete und ein schönes Wochenende

    Wado
  20. So, jetzt habe ich mich nochmal dran gesetzt.
    Ich bin der Meinung, mit Dropdown-Menüs kann man das Problem deutlich besser lösen, als mit einfachen Buttons.

    Hier kannst du dir das Ganze mal anschauen: https://jsfiddle.net/jzkeL5p9/47/

    Punkt 1 hat sich damit in meinen Augen erledigt.

    Zu 2: Du siehst beispielsweise unter
    case "Puppe":
    im Javascript-Code folgendes:
    modify_all([
        ["fmd", false],
        ["fmh", false],
        ["fp", true],
        ["ft1", false],
        ["ft2", false],
        ["ft3", false],
        ["model_choice", false],
    ]);
    break;
    Dabei bedeutet "true", dass das Element eingeblendet wird, bei "false" wird es ausgeblendet. In dem Fall wird also "fp" angezeigt und alles andere ausgeblendet.
    Du kannst hier nach Belieben ergänzen, ändern usw.

    Zu 3: Bei der aktuellen Lösung musst du eben im zweiten Dropdown-Menü "Alle" auswählen, um bei Model sowohl Damen als auch Herren einzublenden.
  21. Hallo fuerderer,

    vielen Dank für deinen Lösungsvorschlag. Dadurch dass die ganze Geschichte etwas komplizierter ist, kann ich es nur mit Buttons machen. Wie gesagt, gibt es verschiedene Varianten welche Zeilen sichtbar sein sollen und welche nicht.
    Ich versuche es mal so zu erklären:

    Beim Klick auf Button >>A<<
    Zeile 1 = sichtbar
    Zeile 2 = unsichtbar
    Zeile 3 = unsichtbar
    Zeile 4 = sichtbar
    Zeile 5 = unsichtbar
    Zeile 6 = unsichtbar
    Zeile 7 = unsichtbar
    Zeile 8 = sichtbar

    Beim Klick auf Button >>B<<
    Zeile 1 = unsichtbar
    Zeile 2 = sichtbar
    Zeile 3 = sichtbar
    Zeile 4 = unsichtbar
    Zeile 5 = unsichtbar
    Zeile 6 = sichtbar
    Zeile 7 = unsichtbar
    Zeile 8 = sichtbar

    Beim Klick auf Button >>C<<
    Zeile 1 = sichtbar (wenn Button >>Damen<< gedrückt wurde)
    Zeile 2 = sichtbar (wenn Button >>Herren<< gedrückt wurde)
    Zeile 3 = unsichtbar
    Zeile 4 = sichtbar
    Zeile 5 = unsichtbar
    Zeile 6 = unsichtbar
    Zeile 7 = sichtbar
    Zeile 8 = unsichtbar

    Beim Klick auf Button >>D<<
    Zeile 1 = unsichtbar
    Zeile 2 = unsichtbar
    Zeile 3 = sichtbar
    Zeile 4 = unsichtbar
    Zeile 5 = sichtbar
    Zeile 6 = sichtbar
    Zeile 7 = unsichtbar
    Zeile 8 = unsichtbar

    usw., usw.
    Es kommt niemals vor, dass nur eine Zeile angezeigt wird und von diesen Buttons gibt es im Moment 40 an der Zahl und Zeilen zum Ausblenden 16. Somit lässt es sich nicht mit einem Dropdown lösen.

    Trotzdem werde ich versuchen, einiges in meinen Code mit einfließen zu lassen. Zum Glück habe ich etwas Zeit bei diesem Projekt, sodass ich mich noch tiefer mit js befassen werde.

    Vielen Dank fuederer
  22. 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!