mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 22:10 Benutzername: Passwort: Auto-Login

Thema: jQuery class-selection vom 14.04.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> jQuery class-selection
Seite: 1, 2  Weiter
Autor Nachricht
Smooth-Graphics
Threadersteller

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 14.04.2011 08:52
Titel

jQuery class-selection

Antworten mit Zitat Zum Seitenanfang

Liebe Leute,

es wäre super, wenn ihr mir erklären könntet, wie ich folgendes Snippet zum laufen kriege:
Code:

$(function(){
   //$(".berge_img").one("click", function() {
   if($("img.berge_img:not(.active)")){
      $(".berge_img").live("click",(function() {
            var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
            var cls = $(this).attr("class").match(/[^\.]+/) + " active";
            $(this).attr("src", src);
            $(this).attr("class", cls);
            $(console.log("tap-over ans set class + src works"));
      }))
   }
   
   if($("img").hasClass("berge_img active")){
      $(console.log("reading active class works"));
      $(".active").live("click",(function() {
         $(console.log("click on active element works"));
         var src2 = $(this).attr("src").replace("_over.png", ".png");
         var cls2 = $(this).attr("class").replace("berge_img active", "berge_img");
         $(this).attr("src", src2);
         $(this).attr("class", cls2);
      }));
   }
   else{
      $(console.log("reading active class doesn't work / no active class found"));
   }

});


Es soll bei erstem Klick eine Grafik geladen werden und die active Klasse hinzugefügt werden. Wenn man dann noch einmal draufklickt, soll das ganze rückgängig gemacht werden.
Mit obigem Code wird aber immer die erste Aktion ausgeführt, also immer wieder nur hinzugefügt.

Wäre nett, wenn ihr Abhilfe schaffen könnt?
Gruß,
smooth-graphics
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
xaos

Dabei seit: 06.10.2004
Ort: Kargath
Alter: -
Geschlecht: -
Verfasst Do 14.04.2011 09:43
Titel

Antworten mit Zitat Zum Seitenanfang

Wär das mitm .toggle() nicht einfacher zu lösen?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Do 14.04.2011 09:47
Titel

Antworten mit Zitat Zum Seitenanfang

Code:


if($('.imageblabla').hasClass('active')) {
 //mache wenn active
}

else {
 // machen wenn nicht

}


Oder wie jetzt ?? * Keine Ahnung... *


Zuletzt bearbeitet von DerM am Do 14.04.2011 09:47, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Smooth-Graphics
Threadersteller

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 14.04.2011 09:55
Titel

Antworten mit Zitat Zum Seitenanfang

@DerM: Ja, natürlich. Ist noch komplett unaufgeräumt. Nur ändert das nichts an der Nicht-Funktion.

xaos hat geschrieben:
Wär das mitm .toggle() nicht einfacher zu lösen?

toggle() wird nicht gehen, da noch mehrere Stufen hinzukommen sollen.


Zuletzt bearbeitet von Smooth-Graphics am Do 14.04.2011 09:55, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Do 14.04.2011 10:09
Titel

Antworten mit Zitat Zum Seitenanfang

anstatt das class attr zu replacen könntest Du auch auf die Jquery eigene Methode zurückgreifen..

http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/

das kannste dann auch chainen
Oder ergibt sich ein Sinn aus dem RegEx gefuchtel?

Code:

$('elem').addClass('klasse1 klasse2 ...').removeClass('Klasse3 Klasse4 ...');


Weiter könntest Du noch mit dem Contains Selector auf die Src zugreifen..
http://api.jquery.com/attribute-contains-selector/

Ich verstehe aber irgendwie dein Problem nicht so ganz..

Gruß
  View user's profile Private Nachricht senden
Smooth-Graphics
Threadersteller

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 14.04.2011 10:27
Titel

Antworten mit Zitat Zum Seitenanfang

DerM hat geschrieben:
anstatt das class attr zu replacen könntest Du auch auf die Jquery eigene Methode zurückgreifen..

Weiter könntest Du noch mit dem Contains Selector auf die Src zugreifen..
http://api.jquery.com/attribute-contains-selector/

1) Logisch, ist natürlich sinnvoller und übersichtlicher, Klassen per addClass / removeClass zu setzen. Aber im Moment ist auch das irrelevant *zwinker*

2) Ja, könnte ich aber:

3) Mein Problem ist, dass ich ja die Klasse setzen kann und auch die BildURL wird gewechselt. Nun möchte ich aber erzielen, dass bei einem weiteren (2. Klick) auf das jeweilige Element wieder die Original-URL verwendet wird.
Das funktioniert momentan nicht, weil er immer erneut den URL-Zusatz hinzufügt. Scheinbar stimmt also irgendetwas im Aufruf nicht, denn er müsste/sollte ja die .active Klasse erkennen und dann in die andere Funktion springen (URL-Zusatz entfernen. Momentan springt er wie gesagt immer in die gleiche Funktion.

Ich hoffe, es wird nun besser verständlich?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
xaos

Dabei seit: 06.10.2004
Ort: Kargath
Alter: -
Geschlecht: -
Verfasst Do 14.04.2011 11:05
Titel

Antworten mit Zitat Zum Seitenanfang

http://jsfiddle.net/ZkqBu/

* Keine Ahnung... *

Oder ich versteh es noch nicht.
  View user's profile Private Nachricht senden
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Do 14.04.2011 12:39
Titel

Antworten mit Zitat Zum Seitenanfang

xaos hat geschrieben:
http://jsfiddle.net/ZkqBu/


jo so würde ich es auch angehen Lächel
  View user's profile Private Nachricht senden
 
Ähnliche Themen Javascript: Imagemap onfocus-Selection
Pics-label (Platform for Internet Content Selection) häh?
jquery - hide content in jquery object
jQuery Plugin - Slider als Input wie in jQuery UI
.img class --> css
class
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.