Ergebnis 1 bis 8 von 8

Thema: JQuery - Toggle Funtkion

  1. #1
    Youngster
    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard JQuery - Toggle Funtkion

    Hallo!

    Ich arbeite gerade an einer kleine Homepage wo ich meine Entwicklungen vorstellen kann. Dazu sind für den Inhalt Tabellen vorgesehen. Bei einem Klick auf die erste Zeile der Tabelle sollen alle anderen Zeilen DIESER Tabelle angezeigt werden. Beim nächsten Klick wieder ausgeblendet.

    Das Ganze ist kein Problem solange ich nur eine Tabelle habe. Sobald aber zwei Tabellen vorhanden sind, bei denen die ersten Zeilen mit den selben CSS-ID's markiert sind, werden natürlich alle Informationen zu allen Produkten eingeblendet.

    Hier ist mein bisheriger Code:
    HTML:
    HTML-Code:
    <html>
     <head>
      <title>Test</title>
      <link rel="stylesheet" type="text/css" href="style.css">
      <script type="text/javascript" src="jquery.js"></script> 
      <script>
       $(document).ready(function(){ 
        $("tr#name").click(function(){
         $("tr#detail").toggle(); 
        }); 
       });
      </script>
     </head>
     <body>
      <table border="0">
       <tr id="name"><td><a href="#">Produktname</a></td></tr>
       <tr id="detail"><td>Details 1</td></tr>
       <tr id="detail"><td>Details 2</td></tr>
      </table>
      <table border="0">
       <tr id="name"><td><a href="#">Produktname</a></td></tr>
       <tr id="detail"><td>Details 1</td></tr>
       <tr id="detail"><td>Details 2</td></tr>
      </table>
     </body>
    </html>
    CSS:
    Code:
    body{}
    tr#name{
     background-color: #CCCCCC;
    }
    tr#detail{
     background-color: #DDDDDD;
    }
    a{
     display: block;
    }
    Nun ja, das ist natürlich nicht der fertige Code, aber zum Testen sollte das genügen.

    Wäre sehr glücklich wenn jemand einen Tipp hätte!

    mfg phzu
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Unregistriert
    Gast

    Standard AW: JQuery - Toggle Funtkion

    Auf einer Seite darf eine ID nur einmal verwendet werden

  3. #3
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: JQuery - Toggle Funtkion

    Zitat Zitat von Unregistriert Beitrag anzeigen
    Auf einer Seite darf eine ID nur einmal verwendet werden
    Genau das. Wenn du etwas mehrmals brauchst nimmst class. ID muss eindeutig sein.
    Das was du möchtest kannst du dann z.B. so machen (ungetestet):
    HTML-Code:
    <html>    <head>        <title>Test</title>        <link rel="stylesheet" type="text/css" href="style.css">        <script type="text/javascript" src="jquery.js"></script><script>        $(function(){            $("tr.name").click(function(){                thisTable = $(this).parents("table");                thisTable.find("td.detail").toggle();            });        });        </script>    </head>    <body>        <table border="0">            <tr class="name"><td><a href="#">Produktname</a></td></tr>            <tr class="detail"><td>Details 1</td></tr>            <tr class="detail"><td>Details 2</td></tr>        </table>        <table border="0">            <tr class="name"><td><a href="#">Produktname</a></td></tr>            <tr class="detail"><td>Details 1</td></tr>            <tr class="detail"><td>Details 2</td></tr>        </table> </body></html>

    Edit: Musst dir wohl rauskopieren zum Lesen, Editor spinnt und streicht alle Zeilenumbrüche aus dem Code, ka wieso.
    Geändert von SinnlosS (20.09.2011 um 09:50 Uhr)
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  4. #4
    Youngster
    Themenstarter

    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: JQuery - Toggle Funtkion

    Danke für die schnellen Antworten!

    ID zu verwenden war natürlich Blödsinn.

    @SinnlosS
    Der Code ist gut, kleiner Fehler ist aber drinnen.

    td.detail >>> tr.detail

    Dann funktionierts.

    Vielen Dank!

    mfg Phzu

  5. #5
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: JQuery - Toggle Funtkion

    Np. War halt wie gesagt ohne testen nur eben hingetippt.
    Was mir grad noch auffällt:
    So wie dein Code im Eingangsteil steht würden da Listen statt Tabellen wesentlich mehr Sinn machen.
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: JQuery - Toggle Funtkion

    Die Homepage wird in HTML5 und CSS3 programmiert. (mit sämtlichen Workarounds...) Bin gerade dabei mir es ein wenig anzueignen, das auch der Grund warum ich solche Sachen vermehrt mit JQuery probiere. Ist einfach schön zu programmieren ohne Flash herumzugurken! Ich weiß schon IE - wie ich ihn hasse!

    Zurück zu deiner Anregung:

    Die Tabellen stehen später natürlich nicht mehr so da wie jetzt, die werden noch in die entsprechenden <section>'s gegeben. Dann dürften die Tabellen wieder mehr Sinn ergeben.

    Oder was meinst du mit Eingangsbereich? Navigation wird schon noch vor den Tabellen positioniert.

    mfg

  7. #7
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: JQuery - Toggle Funtkion

    Im Eröffnungspost meinte ich.
    Es geht nicht darum wo das eingefügt wird, sondern welche Informationen enthalten sind. Wenn da nicht noch mehr Spalten dazukommen brauchst du eben keine Tabelle nehmen, dann sind es ja keine tabellarischen Daten sondern eine Liste.
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  8. #8
    Youngster
    Themenstarter

    Registriert seit
    08.07.2011
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: JQuery - Toggle Funtkion

    Achso meinst du das Ja dann wär das sicher ne Überlegung, allerdings ist es schon möglich dass die detailierten Daten dann mehrere Spalten haben.

    Mal sehn.
    Auf jeden Fall vielen Dank für die Hilfe!

Ähnliche Themen

  1. jquery fehler IE8
    Von naggison im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 10
    Letzter Beitrag: 11.04.2011, 10:06
  2. jquerry und toggle
    Von Einste1n im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 02.11.2008, 16:17
  3. Toggle/Spoiler
    Von Ralf Wedmann im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 30.05.2008, 20:17
  4. toggle für Trottle
    Von Questionmark im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 23.11.2006, 02:10
  5. Toggle Script
    Von Stinki im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 20.06.2006, 21:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •