kostenloser Webspace werbefrei: lima-city

Jquery this + weitere Atribute verwenden

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   goldeneye

   

   goldeneye hat kostenlosen Webspace.

   22:43, 15.3.2010

   Hi Leute.
   Benutze in letzter Zeit immer häufiger Jquery. Deshalb wollte ich diese Frage stellen:
   Ich habe ein Plugin, wessen Ziel- div im Plugin direckt nur über $(this) aufgerufen wird. Nun würde ich gerne wissen, wie ich z.B. untergeordnete li- Tags als genaueren selector zu diesem this hinzufügen kann.
   

   $(this 'li')

   
   Würde mich über eine erklärung freuen
   Gruß
   Daniel
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. cars-ten

   cars-ten hat kostenlosen Webspace.

   23:46, 15.3.2010

   Der jQuery-Selector hat ein optionales 2. Argument, in dem der Kontext des ersten Argument angegeben werden kann. Ein <li> innerhalb eines <div>, das schon als DOM-Objekt in der Pseudovariablen 'this' vorliegt, selektierst Du deshalb mit

   $('li',this)

   Die von Dir angeführte Syntax

   $(this 'li')

   ist so leider nicht möglich, da Du ein DOM-Objekt einfach neben eine String-Variable stellst. Die Variablen sind weder durch ein Komma getrennt, noch werden sie mit einem + verbunden (was ohnehin nicht ginge). Ein Selektor

   $('div li')

   hingegen wäre möglich, findet aber ein <li> unterhalb eines JEDEN beliebigen <div> und eben nicht nur in dem unter 'this' abgelegten <div>.
   
4. Autor dieses Themas

   goldeneye

   

   goldeneye hat kostenlosen Webspace.

   8:27, 16.3.2010

   cars-ten schrieb: Der jQuery-Selector hat ein optionales 2. Argument, in dem der Kontext des ersten Argument angegeben werden kann. Ein <li> innerhalb eines <div>, das schon als DOM-Objekt in der Pseudovariablen 'this' vorliegt, selektierst Du deshalb mit

   $('li',this)

   
   

   
   Habe das gleich mal ausprobiert. Hierzu wollte ich ein kleines Plugin schreiben:
   http://fotoholic.org/wordpress/wp-content/uploads/2010/03/index2.html
   leider funktioniert das plugin nicht. (sollte an sich 3 bilder in einem bestimmten intervall mit darstellen. als weiteres sollte ein kleiner infotext dargestellt werden...
   Wie in der Datei ohne bilder zu sehen ist:
   http://fotoholic.org/wordpress/wp-content/uploads/2010/03/index1.html
   sind zumindest die animationen funktionsfähig.
   könnte mir jemand erklären, wieso es trotzdem nicht funktioniert?
   Gruß
   Daniel

5. cars-ten

   cars-ten hat kostenlosen Webspace.

   7:45, 17.3.2010

   Na, da fängst Du ja gleich ganz schön ntensiv mit jQuery an! Habe schon vieles damit emacht, aber ein plugin habe ich bislang noch nicht in Angriff genommen. In Deinem Code konnte ich ein paar Syntaxfehler (=fehlende Zeichen) entdecken. Der folgende Code zeigt dann auch zumindest das erste Bild mit dem eingeblendeten Untertitel an. Die anderen Bilder werden nicht behandelt, weil die Pseudovariable 'this' in der global definierten function gallery(), die über einen Intervalltimer aufgerufen wird, nicht bekannt ist!
   
   Die function gallery() müsste Teil Deines Plugin sein, damit sie auf das mit jQuery identifizierte Object über this oder $this zugreifen kann!
   
   Wie das genau geht, musst Du aber schon selbst herausfinden - keine Zeit mehr ...

   (function($){
   $.fn.smallShow = function(options) {
   		var
   		 defaults = {
   			speed : '3000',
   		},
   		settings = $.extend({}, defaults, options);  
   	this.each(function() {
   	
   		var $this = $(this);
   			
   		$(this).append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');			
   		$('li',this).css({opacity: 0.0});
   		$('li:first',this).css({opacity: 1.0});	
   		$('#slideshow-caption h3').html($('a:first', this).find('img').attr('title'));
   		$('#slideshow-caption p').html($('a:first',this).find('img').attr('alt'));
   		$('#slideshow-caption').css({opacity: 0.7, bottom:0});	
   		var timer = setInterval('gallery()',settings['speed']);
   		$(this).hover(
   			function () {
   				clearInterval(timer);	
   			},function () {
   				timer = setInterval('gallery()',settings['speed']);			
   			}
   		);
   	
   	})
   }
   })(jQuery);  
   
   function gallery() {
   	var current = ($('li.show',this)?  $('li.show',this) : $('li:first',this));
   	var next = ((current.next().length)?((current.next().attr('id') == 'slideshow-caption')? $('li:first',this):current.next()): $('li:first', this));
   	var title = next.find('img').attr('title');	
   	var desc = next.find('img').attr('alt');	
   	next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
   	$('#slideshow-caption').animate({bottom:-70}, 300, function () {
   			$('#slideshow-caption h3').html(title);
   			$('#slideshow-caption p').html(desc);				
   			$('#slideshow-caption').animate({bottom:0}, 500);	
   	});		
   	current.animate({opacity: 0.0}, 1000).removeClass('show');
   }
   
   
   $(document).ready(function() {		
   	$('ul.slideshow').smallShow();
   });

   
   
   Beitrag zuletzt geändert: 17.3.2010 7:46:51 von cars-ten

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?