[Erledigt] Einzelnes Element ansprechen

berti · 12.06.2011, 14:39

Hallo. Ich habe eine Frage zu folgendem Code.

Code:

<script type="text/javascript">
$(document).ready (function ()
{
    $('#content ul.listing li.row').mouseenter (function ()
    {
        $('#content ul.listing li > .actions').fadeIn(250);
    }).mouseleave (function ()
    {
        $('#content ul.listing li > .actions').fadeOut (100);
    });
});
</script>

<ul class="listing">
    <li><div class="actions" style="display:none">Foo</div> Bar</li>
    <li><div class="actions" style="display:none">Foo</div> Bar</li>
    <li><div class="actions" style="display:none">Foo</div> Bar</li>
</ul>

Gedacht ist es so: Fährt man mit dem Cursor über eines der Listen-Elemente wird der container 'actions' eingeblendet. Verlässt man es, wird es wieder ausgeblendet.

Leider ist es so, wenn ich über ein Element fahre wird nicht nur in diesem der Container eingeblendet, sondern auch in jedem anderen.

Ich habe das Problem zwar gelöst, indem ich den Code etwas verändert habe, aber ich würde trotzdem gerne wissen, ob der obige Javascript Code einfach nicht funktionieren kann, oder ob ich etwas falsch gemacht habe.

Viele Dank für eure Hilfe.

PS: meine Lösung

Code:

$('#content ul.listing li.row').mouseenter (function ()
{
    $(this).addClass ('selected');
    $('#content ul.listing li.selected .actions').fadeIn (250);
}).mouseleave (function ()
{
    $('#content ul.listing li.selected .actions').fadeOut (100);
    $(this).removeClass ('selected');
});

nikosch · 12.06.2011, 14:59

http://php.de/wiki-php/index.php/Inh...und_ausblenden

php1704 · 12.06.2011, 17:17

Du musst im gefundenen li weitersuchen.

Code:

$('#content ul.listing li').mouseenter (function ()
{
    // this zeigt nun auf das gefundene li
    $('.actions', this).fadeIn(250); // .action im gefundenen li einblenden
}); //.mouseout ...

Grüße.

berti · 12.06.2011, 17:34

Zitat:

Zitat von php1704

Du musst im gefundenen li weitersuchen.

ahhhh stimmt. Super danke für die Hilfe!

Asterixus · 12.06.2011, 22:50

Eine kleine Information, die dich interessieren kann: jQuery hat auch ein Event hover für seine Elemente, die als ersten Parameter ein Callback für mousein und als zweiten Parameter ein Callback für mouseout akzeptiert.

tr0y · 13.06.2011, 05:49

Das ist schon richtig, und noch als hinweis: Wenn man .hover() nur einen Callback als argument übergibt wird dieser als InOut-Handler interpretiert, ergo beim mouseenter und mouseleave aufgerufen. Das in Verbindung der Toggle-Version von Fade und du bist am Ziel:

Code:

$('.theCoolNiceElementThatShoudlBeHovered').hover( function() {
   $(this).fadeToggle(400);
});

berti · 13.06.2011, 15:35

Zitat:

Zitat von Asterixus

Eine kleine Information, die dich interessieren kann: jQuery hat auch ein Event hover für seine Elemente, die als ersten Parameter ein Callback für mousein und als zweiten Parameter ein Callback für mouseout akzeptiert.

Hey es ist mir durchaus bekannt, dass diese Funktion existiert. Ich habe meinen obigen Beispiel-Code nur auf das nötigste reduziert. Eigentlich beinhaltet die Container .actions noch weitere Container, die von dem hover-Effekt nicht betroffen sein sollten.
http://www.bennadel.com/blog/1805-jQ...MouseLeave.htm

rudygotya · 13.06.2011, 16:31

Der verlinkte Artikel hat das eigentliche Problem ausgespart, dass mouseenter ein proprietäres Event des IEs ist. jQuery kümmert sich darum, dass man nicht mit beiden Events arbeiten muss. Unobtrusive ist deine Lösung noch nicht, focus und blur solltest du auch binden. Bei allen hier gezeigten Lösungen gibts Ziehharmonika-Effekte, wenn der Benutzer mit der Maus schnell hin und her bewegt (sprich mehrere registrierte Animation-Handler, die nacheinander abgearbeitet werden).

Ungetestet:

PHP-Code:

  $( function () {
    $( '#content ul.listing li.row' )
        .bind( "focus mouseenter blur mouseleave", function () {
            $( this )
                .toggleClass( "selected" )
                .children( ".actions" )
                    .stop( true, true )
                    .fadeToggle();
        } );
} );

grüße

Basti

nikosch · 13.06.2011, 16:40

Bin jetzt nicht sicher, aber mit toggle würde ich hier nicht arbeiten. Könnte sein, dass sich das Verhalten umkehrt (onBlur mouseenter z.B.)

rudygotya · 13.06.2011, 17:17

Stimmt, guter Einwand. mea culpa

PHP-Code:

  $( function () {
    $( '#content ul.listing li.row' )
        .bind( "focus mouseenter", function () {
            var $this = $( this );
            if( $this.hasClass( "selected" ) ) { return; }
            $this
                .addClass( "selected" )
                .children( ".actions" )
                    .stop( true, true )
                    .fadeIn();
        } )
        .bind( "blur mouseleave", function () {
            var $this = $( this );
            if( ! $this.hasClass( "selected" ) ) { return; }
            $this
                .removeClass( "selected" )
                .children( ".actions" )
                    .stop( true, true )
                    .fadeOut();
        } );
} );

edit: zwar noch ungetestet, aber so sollts passen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fusszeile verschwindet, Leerzeile fehlt	ariane	PHP Einsteiger	4	17.04.2011 18:21
[Erledigt] SimpleXML: Array enthalten, aber nur Zugriff auf erstes Element ???	Arne Drews	PHP Einsteiger	18	31.01.2011 21:31
HTML-String auslesen	bit4fox	PHP Einsteiger	10	08.01.2011 16:33
Pixel addieren und Element somit neu positionieren schlägt fehl	litterauspirna	JavaScript, Ajax und mehr	9	29.10.2010 22:04
[Erledigt] Mit XPath im DOMDocument PHP5 und der foreach Schleife einen Element WERT	hjw-kunstwerk	PHP Tipps 2010	3	03.06.2010 00:07
Längstes Element eines Array berechnen	thiagojonas	PHP Tipps 2010	7	04.04.2010 17:42
Auf ein einzelnes Element eine ausgewählten Datensatzes zugreifen	fender	PHP Tipps 2009	12	15.01.2010 16:18
Element erstellen, in Quelltext einfügen und auf dieses zugreifen können	R4v3r	JavaScript, Ajax und mehr	8	18.12.2009 11:33
Welche Elemente B sind ähnlich dem Element A	Anwender27	Scriptbörse	7	01.05.2008 11:45
Formular in Hauptfenster auf iframe ansprechen	R.E.M.	HTML, Usability und Barrierefreiheit	2	24.09.2006 15:33
Unsichtbares Formularfeld mit Javascript ansprechen	mAy^daY	HTML, Usability und Barrierefreiheit	6	13.08.2006 21:25
Seite per ID ansprechen?	tayke	PHP Tipps 2006	4	01.06.2006 23:37
Array Element vor und nach dem aktuellen Element ausgeben	NetLook	PHP Tipps 2006	2	09.05.2006 15:29
[JS/CSS] Element erst onclick sichtbar machn script.aculo.us	StatischeEntladung	HTML, Usability und Barrierefreiheit	1	06.04.2006 18:32
[Erledigt] Element mit Zeitschalter		HTML, Usability und Barrierefreiheit	1	04.10.2005 11:44

12.06.2011, 14:39
berti Benutzer Registriert seit: 21.02.2010 Beiträge: 31 PHP-Kenntnisse: Anfänger	[Erledigt] Einzelnes Element ansprechen Hallo. Ich habe eine Frage zu folgendem Code. Code: <script type="text/javascript"> $(document).ready (function () { $('#content ul.listing li.row').mouseenter (function () { $('#content ul.listing li > .actions').fadeIn(250); }).mouseleave (function () { $('#content ul.listing li > .actions').fadeOut (100); }); }); </script> <ul class="listing"> <li><div class="actions" style="display:none">Foo</div> Bar</li> <li><div class="actions" style="display:none">Foo</div> Bar</li> <li><div class="actions" style="display:none">Foo</div> Bar</li> </ul> Gedacht ist es so: Fährt man mit dem Cursor über eines der Listen-Elemente wird der container 'actions' eingeblendet. Verlässt man es, wird es wieder ausgeblendet. Leider ist es so, wenn ich über ein Element fahre wird nicht nur in diesem der Container eingeblendet, sondern auch in jedem anderen. Ich habe das Problem zwar gelöst, indem ich den Code etwas verändert habe, aber ich würde trotzdem gerne wissen, ob der obige Javascript Code einfach nicht funktionieren kann, oder ob ich etwas falsch gemacht habe. Viele Dank für eure Hilfe. PS: meine Lösung Code: $('#content ul.listing li.row').mouseenter (function () { $(this).addClass ('selected'); $('#content ul.listing li.selected .actions').fadeIn (250); }).mouseleave (function () { $('#content ul.listing li.selected .actions').fadeOut (100); $(this).removeClass ('selected'); });


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

12.06.2011, 14:59
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	http://php.de/wiki-php/index.php/Inh...und_ausblenden __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

12.06.2011, 17:17
php1704 Erfahrener Benutzer Registriert seit: 13.05.2011 Beiträge: 188 PHP-Kenntnisse: Fortgeschritten	Du musst im gefundenen li weitersuchen. Code: $('#content ul.listing li').mouseenter (function () { // this zeigt nun auf das gefundene li $('.actions', this).fadeIn(250); // .action im gefundenen li einblenden }); //.mouseout ... Grüße.

12.06.2011, 22:50
Asterixus Erfahrener Benutzer Registriert seit: 03.08.2010 Beiträge: 300 PHP-Kenntnisse: Fortgeschritten	Eine kleine Information, die dich interessieren kann: jQuery hat auch ein Event hover für seine Elemente, die als ersten Parameter ein Callback für mousein und als zweiten Parameter ein Callback für mouseout akzeptiert.

13.06.2011, 05:49
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Das ist schon richtig, und noch als hinweis: Wenn man .hover() nur einen Callback als argument übergibt wird dieser als InOut-Handler interpretiert, ergo beim mouseenter und mouseleave aufgerufen. Das in Verbindung der Toggle-Version von Fade und du bist am Ziel: Code: $('.theCoolNiceElementThatShoudlBeHovered').hover( function() { $(this).fadeToggle(400); }); __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

13.06.2011, 16:31
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Der verlinkte Artikel hat das eigentliche Problem ausgespart, dass mouseenter ein proprietäres Event des IEs ist. jQuery kümmert sich darum, dass man nicht mit beiden Events arbeiten muss. Unobtrusive ist deine Lösung noch nicht, focus und blur solltest du auch binden. Bei allen hier gezeigten Lösungen gibts Ziehharmonika-Effekte, wenn der Benutzer mit der Maus schnell hin und her bewegt (sprich mehrere registrierte Animation-Handler, die nacheinander abgearbeitet werden). Ungetestet: PHP-Code: `$( function () { $( '#content ul.listing li.row' ) .bind( "focus mouseenter blur mouseleave", function () { $( this ) .toggleClass( "selected" ) .children( ".actions" ) .stop( true, true ) .fadeToggle(); } ); } );` grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

13.06.2011, 16:40
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Bin jetzt nicht sicher, aber mit toggle würde ich hier nicht arbeiten. Könnte sein, dass sich das Verhalten umkehrt (onBlur mouseenter z.B.) __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

13.06.2011, 17:17
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Stimmt, guter Einwand. mea culpa PHP-Code: $( function () { $( '#content ul.listing li.row' ) .bind( "focus mouseenter", function () { var $this = $( this ); if( $this.hasClass( "selected" ) ) { return; } $this .addClass( "selected" ) .children( ".actions" ) .stop( true, true ) .fadeIn(); } ) .bind( "blur mouseleave", function () { var $this = $( this ); if( ! $this.hasClass( "selected" ) ) { return; } $this .removeClass( "selected" ) .children( ".actions" ) .stop( true, true ) .fadeOut(); } ); } ); edit: zwar noch ungetestet, aber so sollts passen. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog Geändert von rudygotya (14.06.2011 um 22:13 Uhr).