zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden querySelector mehre klassen zusammen fassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.12.2014, 12:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard querySelector mehre klassen zusammen fassen

Über querySelector simuliere ich den CSS Hover befehlt über JavaScript

Der CSS befehlt:
.view-sonne:hover h2,.view-sonne:hover p,.view-sonne:hover a.info{
opacity: 1;
}
also das Hover wirkt sich auf h2 p und die klasse info aus.
Das kann js auch:

Code:
document.querySelector(".view-sonne .info").style.opacity=1;
document.querySelector(".view-sonne h2").style.opacity=1;
document.querySelector(".view-sonne p").style.opacity=1;
aber laut:
JavaScript: Umfassender Zugriff auf DOM-Elemente mit ?querySelector()? | t3n
kann man das auch in einen Befehl quietschen

Code:
document.querySelector(".view-sonne h2  .view-sonne p ").style.opacity=1;
hier wirkt sich das nur auf p aus
die Leerzeichen entfernen geht auch nicht, dann meckert js

Hat einer eine Idee?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.12.2014, 13:00
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

So wie du es gemacht hast, steht das aber nicht in dem Artikel. Zwei Selektoren werden immer mit Komma getrennt, außerdem kannst du mit querySelector nur ein Element auswählen, wenn du mehrere haben möchtest, musst du querySelectorAll verwenden. Du kannst den Style dann allerdings nicht mehr einfach so setzen, sondern musst die NodeList (die dir querySelectorAll zurückliefert) in einer Schleife durchlaufen, oder Array.prototype.map dafür nutzen.

Zum Beispiel so:
Code:
var nodeList = document.querySelectorAll('.view-sonne h2, .view-sonne p');
Array.prototype.map.call(nodeList, function(item) {
	item.style.opacity = 1;
});
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.12.2014, 17:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von inta Beitrag anzeigen
So wie du es gemacht hast, steht das aber nicht in dem Artikel. Zwei Selektoren werden immer mit Komma getrennt, außerdem kannst du mit querySelector nur ein Element auswählen, wenn du mehrere haben möchtest, musst du querySelectorAll verwenden. Du kannst den Style dann allerdings nicht mehr einfach so setzen, sondern musst die NodeList (die dir querySelectorAll zurückliefert) in einer Schleife durchlaufen, oder Array.prototype.map dafür nutzen.

Zum Beispiel so:
Code:
var nodeList = document.querySelectorAll('.view-sonne h2, .view-sonne p');
Array.prototype.map.call(nodeList, function(item) {
	item.style.opacity = 1;
});
Cool, man lernt immer neues
Nun sind es 6 kästen die alle die view-sonne klasse haben.
Dort läuft bei Mouse Over oder zufällig für ein Kasten über js eine kleine Animation ab.
ich habe die nun verschiedene id gegeben(zu0,zu1...)
wie kann ich die in die Schleife id auslesen?

z.z behelfe ich mich mit:
#zu1.view-partner h2
damit kann aber man leben

Ein größeres Problem ist noch.
Die Animation wird über Mouser Over (Maus darüber) oder zufällig für ein Kasten gestartet.
Läuft die Animation dann über js einmal durch, so als wenn man mit der Maus
rüber fährt und dann wieder die Maus weg nimmt , also Urzustand
funktioniert das MouseOver bei den Kasten nicht mehr, obwohl alles um Urzustand ist.

Nachtrag:
es geht nur über die Event onmouseover/out
die sind wohl mit css:hover nicht mischbar

Geändert von seerose (21.12.2014 um 17:27 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 22.12.2014, 15:26
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Wenn du eine Liste von Elementen hast, dann brauchst du die IDs nicht unbedingt, du kannst dir die Elemente mit querySelectorAll holen und dann über ihren Index darauf zugreifen.

Davon abgesehen habe ich weder verstanden was du dir da genau gebaut hast, noch was dein Problem ist. Zeig mal den kompletten Code, am besten gleich online.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre 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 aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS zusammen fassen Erdbeertorte CSS 2 03.01.2013 16:06
Klassen in der css Datei wiederverwenden mappenz CSS 3 23.04.2012 20:11
php Klassen - Einsatz und Sinn? paracelsus Serveradministration und serverseitige Scripte 306 17.02.2009 20:51
header bestandteile zu 1 zusammen fassen nalin CSS 5 24.05.2005 13:47
Klasse soll Formatierungen von anderen Klassen übernehmen? Herbi CSS 3 28.01.2004 00:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:46 Uhr.