php.de

Zurück   php.de > Webentwicklung > JavaScript, Ajax und mehr

JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 17.12.2009, 22:33  
Benutzer
 
Benutzerbild von Silent
 
Registriert seit: 21.12.2008
Beiträge: 87
Silent befindet sich auf einem aufstrebenden Ast
Standard Problem mit addClass/ removeClass bei Jquery

Hallo Leute!
Wie die Überschrift schon sagt, habe ich ein Problem mit Jquery und der Funktion addClass/ removeClass.

Code:
<script type="text/javascript">
$(document).ready(function() {    
  $('a.pause').click(function() { 
			if($('.pause')){			 
    		$(this).removeClass('pause');					
    		$(this).addClass('play');																			
			}			
			else{
    		$(this).addClass('play');																						
			}
    	$("img.swit").each(function(){
      $(this).attr("src","play.gif");		  	
      });		
  });		
   
  $('a.play').click(function() { 
			if($('.play')){			 
    		$(this).removeClass('play');					
    		$(this).addClass('pause');																			
			}				
			else{
    		$(this).addClass('pause');																						
			}							 				
    	$("img.swit").each(function(){
      $(this).attr("src","pause.gif");		  	
      });				
  });				
});
</script>


<a class="pause" href="#"><img class="swit" src="pause.gif" /></a>
Sorry dass es den Code so komisch verhaut...

ich möchte mit Jquey folgendes lösen:
wenn auf den Link geklickt wird, soll sich das Bild im <img> und die Klasse im <a> ändern. Als default-Wert hat das <a> schon die Klasse class="pause".
Aber es geht einfach nicht.
Silent ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 17.12.2009, 22:40  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Also ich würde das eher so machen (ungetetstet):
Code:
<script type="text/javascript">

$(document).ready(function() {

  $('a.playpause').click(function() {
      
      if ($(this).hasClass('pause')) {
        // Pause Status -> Play
        var src = 'play.gif';
      }
      else {
        // Play Status -> Pause
        var src = 'pause.gif';
      }
      
      $(this).toggleClass('pause');
      $('img' , $this).attr("src" , src);
  });
});
</script>

<a class="playpause pause" href="#"><img class="swit" src="pause.gif" /></a>
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 17.12.2009, 22:53  
Benutzer
 
Benutzerbild von Silent
 
Registriert seit: 21.12.2008
Beiträge: 87
Silent befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die Hilfe.
Das mit dem Ändern der Klasse klappt! Nur das Bild will noch nicht wechseln.
Silent ist offline   Mit Zitat antworten
Alt 17.12.2009, 23:33  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Hmm, ich dachte immer das sei egal.

Code:
$('img' , this).attr('src' , src);
Und die Klasse beim Bild kann auch raus:
Code:
<a class="playpause pause" href="#"><img src="pause.png" /></a>
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 17.12.2009, 23:47  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Alternative Lösung über CSS.
Beachte auch .bind, das Dir auch Tastaturbenutzung (Space) einbringt:

Code:
<style>
  .playpause {
    overflow:hidden; /* dotted border: http://24ways.org/2009/dont-lose-your-focus */
    margin-left:100px;
    text-indent: -9999px; /* shift text outside */
    display:block;
    width:32px;
    height:32px;
    background-image:url(play.png);
    }
  .playpause.pause {
    background-image:url(pause.png);
    }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

  $('a.playpause').bind('click keyup' , function(event) {
      
      if (! event.keyCode || 32 == event.keyCode) {
        $(this).toggleClass('pause');
      }
  });
});
</script>

<a class="playpause pause" href="#">Play/Pause</a>
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--

Geändert von nikosch (17.12.2009 um 23:51 Uhr).
nikosch ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
JQuery "Ajax" Ablauf Problem mit "setInterval" halskrause JavaScript, Ajax und mehr 6 03.12.2009 22:43
Problem beim Download Management mistermint PHP Tipps 2009 8 24.10.2009 11:34
Umlaut Problem nokieone PHP Tipps 2009 7 16.10.2009 19:30
[Erledigt] jQuery Dateien nachladen Phoscur JavaScript, Ajax und mehr 7 14.03.2009 13:44
Problem mit Basedir in PhP cmuch05 Datenbanken 9 08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal soulan PHP Tipps 2008 13 28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB Lapje PHP Tipps 2008 1 22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen) go1denboy PHP Tipps 2008 1 23.09.2008 12:19
Problem mit swfobjects R4v3r JavaScript, Ajax und mehr 8 21.09.2008 14:17
JQuery - wrap() + Internet Explorer problem weidc JavaScript, Ajax und mehr 0 10.09.2008 11:26
Timestamp problem phrain PHP Tipps 2008 2 04.04.2008 09:41
datensätze defekt oder problem mit dem einlesen? Ministry Datenbanken 4 06.07.2006 18:42
problem!!! PHP Tipps 2006 6 08.02.2006 11:06
Smarty und PHP-Skript Problem PHP Tipps 2004-2 2 03.12.2004 22:27
Problem mit alter JavaScript-Funktion woods PHP Tipps 2004 1 13.08.2004 13:34

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
jquery class ändern, jquery addclass, jquery klasse ändern, jquery removeclass, javascript addclass, jquery class auslesen, jquery add class, jquery remove class, jquery class setzen, jquery classe ändern, jquery class tauschen, jquery class wechseln, addclass jquery, jquery addclass removeclass, jquery klasse setzen, jquery class, class ändern jquery, jquery addclass funktioniert nicht, addclass, jquery class austauschen

Alle Zeitangaben in WEZ +2. Es ist jetzt 10:57 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum