✔ slideToggle() nur auf dem gerade geklickten Element verwenden

T

Typs

Mitglied
Hallo alle zusammen,

ich habe hier ein Problem und zwar habe ich eine Liste aus einer Datenbank ausgelesen und nun mehrere Elemente mit der gleichen Klasse. Wenn ich ein Element anklicke öffnen sich aber auch gleichzeitig alle anderen. Ist ja klar warum. Ich spreche ja mit dem Klick alle Elemente mit der selben Klasse an. Wie kann ich das nun so machen, dass er wirklich nur das geklickte Element betrachtet und mir so nur einmalig für diese Zeile ein slideToggle() ausführt?

Das Element das den slideToggle() aufruft:
HTML: 
<td><span class="historie">?</span></td>

Das versteckte Element:
HTML: 
<tr><td colspan="7" class="historie-inner">test</td></tr>

JavaScript:
Code: 
$(document).ready(function(){
    $("span.historie").click(function () {
        $("td.historie-inner").slideToggle("fast");
    });
})

Da ich mehrere Zeilen aus der Datenbank lese, habe ich so mehrere span's die alle verstecken td öffnet. will aber nur den dazugehörigen haben.

Mit freundlichen Grüßen

typs
 
Es wäre sinnvoll wenn du die beiden Zeilen HTML mal gemeinsam zeigen würdest, damit man sieht, in welcher Beziehung die innerhalb des DOM stehen. Je nach dem sieht die Lösung etwas anders aus. Entweder baust du was mittels eq() und index() oder wenn die Elemente nebeneinander/ineinander oder irgendwie anders in Beziehung stehen, dann wäre siblings()/next() o.ä. brauchbar.
 
PHP: 
<table border="1" rules="rows">

    <thead><tr>
        
        <th>&nbsp;</th>
        
        <th colspan="3">Inhaber</th>
    
        <th>Aktuell bei:</th>
    
        <th>Schlüssel-Nr.:</th>
    
        <th>Verlauf</th>
        
    </thead></tr>

<?php

if ($anzahl_inhaber > 0) {
    $i=0;
    while ($inhaber = mysql_fetch_object($abfrage_inhaber)) {
        $i++;
        //Benutzername des Owners holen
        $abfrage_benutzername              = mysql_query("SELECT benutzername FROM benutzer WHERE id = '" . $inhaber->benutzer_id . "' ");
        $benutzername                      = mysql_fetch_object($abfrage_benutzername);
        
        //Schlüssel holen
        $query_schluessel                  = "SELECT * FROM schluessel WHERE key_owner_id = '" . $inhaber->benutzer_id . "'";
        $abfrage_schluessel                = mysql_query($query_schluessel);
        $schluessel                        = mysql_fetch_object($abfrage_schluessel);
        
        //Current_location
        $query_current_location            = "SELECT * FROM current_location WHERE key_id = '" . $schluessel->key_id . "' ORDER BY start_date DESC ";
        $abfrage_current_location          = mysql_query($query_current_location);
        $current_location                  = mysql_fetch_object($abfrage_current_location);
        
        //Benutzername von Current_Person (wenn nicht owner)
        $query_current_location_benutzer   = "SELECT benutzername FROM benutzer WHERE id = '" . $current_location->current_person . "'";
        $abfrage_current_location_benutzer = mysql_query($query_current_location_benutzer);
        $current_location_benutzer         = mysql_fetch_object($abfrage_current_location_benutzer);
        
        //Seit: beim anderen user
        $query_current_person_date         = "SELECT start_date FROM current_location WHERE current_person = '" . $current_location->current_person . "'";
        $abfrage_current_person_date       = mysql_query($query_current_person_date);
        $current_person_date               = mysql_fetch_object($abfrage_current_person_date);
        
        $query_mitarbeiter                 = "SELECT benutzername FROM benutzer";
        $abfrage_mitarbeiter               = mysql_query($query_mitarbeiter);
        
?>

    <tbody><tr>

        <td>
            <?php if ($schluessel->key_owner_id == $current_location->current_person) {?>
            <a href="#"><img src="images/schluessel-bei-inhaber.png" alt="Schlüssel bei Inhaber" title="Schlüssel bei Inhaber" /></a>
            <?php }else{?>
            <a href="#"><img src="images/schluessel-bei-anderen.png" alt="Schlüssel verliehen" title="Schlüssel verliehen" /></a>
            <?php }?>
        </td>
    
        <td><?php echo $benutzername->benutzername; ?></td>
        
        <td>
            <div class="check">    
                <input type="checkbox" id="check<?php echo $i;?>" <?php if ($schluessel->bks == 1) { echo 'checked="checked"'; } ?> DISABLED/><label for="check<?php echo $i;?>">bks</label>
                <input type="checkbox" id="check<?php echo $i = $i+1;?>" <?php if ($schluessel->keso == 1) { echo 'checked="checked"'; } ?> DISABLED/><label for="check<?php echo $i;?>">keso</label>
            </div>
        
        </td>
        
        <td><a class="edit" href="http://localhost/key/liste.php?key_id=<?php echo $schluessel->key_id;?>"><img src="images/datensatz-bearbeiten.png" alt="Datensatz bearbeiten" title="Datensatz bearbeiten" /></a></td>
        
        <td>
        
            <?php
    
            if ($current_location->current_person != $inhaber->benutzer_id) {
            
            ?>
            
                <ul>
                    <li>bei: <?php echo $current_location_benutzer->benutzername; ?></li>
                    <li>seit: <?php echo $current_person_date->start_date; ?></li>
                </ul>
            
            <?php
            
            }
            
            ?>
        
        </td>
        
        <td align="center"><?php echo $schluessel->key_id; ?></td> <!-- Hier das öffnende Element -->
        
        <td><span class="historie">?</span></td>

        
    
    </tr></tbody>
    
    <tr>
        <td colspan="7" class="historie-inner"> <!-- Hier das versteckte Element -->
            <p>
            <table style="font-size:11px; width: 500px;" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="100"><strong>Benutzer:</strong></td>
                    <td width="150"><strong>angenommen:</strong></td>
                    <td><strong>abgegeben:</strong></td>
                </tr>
                <?php
                $query_historie = "SELECT * FROM current_location WHERE key_id = '".$schluessel->key_id."' ORDER BY start_date DESC";
                $abfrage_historie = mysql_query($query_historie);
                while($historie = mysql_fetch_object($abfrage_historie)){
                
                $query_name = "SELECT benutzername FROM benutzer WHERE id = '".$historie->current_person."'";
                $abfrage_name = mysql_query($query_name);
                $name = mysql_fetch_object($abfrage_name);
                    
                    if ($historie->current_person != $inhaber->benutzer_id) {
                ?>
                <tr <?php if($historie->end_date != NULL){ echo "style='color: #555;'"; }?> onMouseOver="this.style.backgroundColor='#666';" onMouseOut="this.style.backgroundColor='#333';">
                    <td><?php echo $name->benutzername;?></td>
                    <td><?php echo $historie->start_date;?></td>
                    <td><?php if ($historie->end_date == NULL){ echo "<span class='danger'>hat ihn noch!</span>"; } else { echo "<img src='images/abgegeben.png' alt='abgegeben' title='abgegeben' />".$historie->end_date; } ?></td>
                </tr>    
                <?php
                    
                    }
                
                }
                
                ?>
                
            </table>
            </p>
        </td>
    </tr>
<?php

    }
    
?>

</table>
 
So war es nicht ganz gemeint, jetzt ist es sehr unübersichtlich. Aber ich kann dir trotzdem mal einen Lösungsansatz geben, wenn ich es richtig verstanden hab. Im Prinzip identisch zu dem, was ich hier geschrieben hab: http://www.tutorials.de/javascript-ajax/376291-jquery-content-fade-mehrerer-divs.html#post1945403

Javascript: 
var historieAll = $('.historie');
var historieInnerAll = $('.historie-inner');
 
historieAll.click(function() {
    var index = historieAll.index(this);
    historieInnerAll.eq(index).slideToggle('fast');
});

Sollte auch ziemlich performant sein, denn es werden einmalig alle benötigten Element gesucht und beim Klick kann man in O(n) den Index herausfinden. Man könnte zwar auch mittels parent(), next() und find() was bauen, aber dann müsste man bei jedem Klick diverse DOM Operationen machen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück