JavaScript - Text ein und ausblenden...

Pelix

Hallo,

ich wollte für ein "kleines" Projekt eine Funktion in meinem Chat einbauen,
mit der man einen bestimmten Text an der "User-Online"-Liste mit einem
Button per Klick ein- und ausblenden kann.

Das Problem ist, dass dieses Script einen feste Definition nutzt.

Sprich: Wenn zwei oder mehr User online sind, und ich klicke auf den
Button, wird nicht der Text vom ausgewählten User geöffnet sondern
von dem ersten User im Chat da jeder <div>-Container die gleiche ID
nutzt.

(Hoffe es ist verständlich).

Wie kann ich meinem Script jetzt sagen, dass der <div>-Container bei
jedem User eine andere ID nutzt? Hier mal das JavaScript:

Code

function showText() {        
        var spoiler = document.getElementById('spoiler');
 
        if (spoiler.style.display == 'block') {
           spoiler.style.display='none';
        } else {
 
          spoiler.style.display='block';
         }
        return false;
   }

Alles anzeigen

Dies ist der "Button":

Code

<a href=\"#\" onclick='showText();'>Open</a>

Und dies der <div>-Container:

Code

<div id='spoiler'>

Wie und wo muss ich etwas ändern, damit es auch nur den <div>
vom ausgewählten User öffnet und nicht bei dem ersten weil jede
<div id> den selben Wert hat?

//EDIT:
Habe schon überlegt die User ID von PHP zu JavaScript zu übertragen.
Funktioniert auch nur wie definiere ich diese ID jetzt für den einzelnen
<div>-Container? Irgendwie bin ich gerade Brain-AFK um das umzusetzen... X_x

synaptic

Code

function showText(irgendeineuserid) {                
 var spoiler = document.getElementById(irgendeineuserid);           
if (spoiler.style.display == 'block') {          
  spoiler.style.display='none';         
} else {            
 spoiler.style.display='block';       
   }        
 return false;   
 }

dann musste nur noch beim generieren des quelltextes die user-id vergeben und den ganzen scheiss aufrufen durch

Code

<a href=\"#\" onclick='showText("deineuserid");'>Open</a>

oder

HTML

<a href=\"javascript:showText('deineuserid');\" >Open</a>

is ungetestet, aber so sollte es fruchten

Pelix

Hmm klingt logisch aber mal doof gefragt:

Wie bekomm ich denn in "function showText(irgendeineuserid) {" eine ID? ich kann ja mit z.B.

Code

var id = <? echo $list[id]; ?>;

die ID in eine JS Variable definieren nur wie bekomm ich die schon bei der function rein?

synaptic

also ich würd sowas unobstrusive mit jquery machen.
aber dafür müsste ich den code sehen mit dem link und dem anderen gedöhnse.
eigentlich erzeugst du den code aber in einer schleife serverseitig und in der schleife haste dann ja auch die id parat oder nicht?

Pelix

Also mit jquery hatte ich mir auch schon überlegt .... das würde dann ungefähr so aussehen:

Code

$(document).ready(){


$('.usr img').click(function(){
    if($(this).next('.status').css('display') == 'block'){
        $(this).next('.status').slideUp(200);
    }else{
        $(this).next('.status').slideDown(200);
    }
})




}

Alles anzeigen

Nur wie sage ich dem Bild auf das ich klick jetzt, dass es die Funktion starten soll?
Wenn man auf das Bild klickt passiert nix...

synaptic

nen krümel html wäre hilfreich

Pelix

Ahso sry....

Damit es etwas übersichtlicher ist hab ich das mal in 5 echos verpackt

Code

echo "<div class='usr'>";        
echo "<a href=\"#\" onclick=\"return profile('profile.php?usr=$list[id]')\">$list[username]</a><span style=\"float:right;\">$kick $ban $admin $pm <img src=\"lib/img/icons/status.png\"></span>";
echo "<div class='status'>";
echo "<img src=\"lib/img/icons/gold.png\" title='Gold'> $list[gold]";
echo "</div></div>";

synaptic

ok also du hast zwei image-tags, auf beide würdest du aktuell die click-action legen.
sprich nicht nur auf das status.png
dann empfehle ich dir von anfang an dran zu denken deine objekte in variablen zu speichern, denn jedes mal nen selektor bedeutet jedes mal speicher und zeit.
so nun zu deinem problem

wenn du etwas nur auf das status.png legen willst musste entweder über first() das img holen oder du gibst dem ding ne klasse und gehst via img.DEINEKLASSE im selektor an das teil dran.
dann würde ich mir überlegen wann genau die weitere funktion ausgeführt werden soll.
da ich auf eine reihenfolge statt gleicher abfolge stehe, würde ich die funktion selber im callback vom slideDown ausführen lassen.

genau genommen machst du aber das verstecken und anzeigen mit der funktion und jquery schon richtig

so wäre der code etwas sauberer :

Code

$(document).ready(){
    $('div.usr img').first().click(function(){
        var statusdiv = $(this).next('div.status');
        if(statusdiv.css('display') == 'block'){
            statusdiv.slideUp(200); // den status verstecken
        }else{
            statusdiv.slideDown(200, function(){ //status verstecken und danach was anderes mächtiges tun
                //do other magic stuff
            });
        }
    })
}

Alles anzeigen

Tags