Mehrere Elemente auswählen

Shyne

Hallo

Wie kann ich durch die folgende Methode mehrere Elemente (um genau zu sein: div#div1, p#div1 und img#div1) auswählen?

Code

$("div#div1").mouseover(function () {

Oder anders gefragt: Kann ich um den Code ein wenig sinnvoller zu machen, lediglich eine ID auswählen, die mehrere Tags entspricht?

jojo87

darf man daraus schliessen, dass du die Id mehrfach vergeben hast?

Shyne

Yep, in einem Div gibt es 1 mal p und 1 mal img und alle 3 haben die selbe ID.

synaptic

ID = Identificator....
ich umschreib es mal so:
du hast 3 kinder.. alle drei spielen im gleichen zimmer, alle drei heissen klaus.
einer blond, einer braunhaarig und einer hat glatze..
du willst was von dem ohne haare, weil er zum friseur gehen soll....
machst die tür auf und sagst "hey klaus"

was glaubste wieviele kinder da "ja" sagen werden?

Shyne

synaptic genau darum geht es ja
Ich möchte sie ALLE ansprechen!

synaptic

in meinem beispiel wollte ich herauskristallisieren, dass du nur EIN KIND haben möchtest...

aber ich sehe du hast den part mit der ID noch nich verstanden..
eine ID muss eineindeutig sein und darf deshalb nur einmal im dokument auftauchen!

du könntest den elementen ne gemeinsame klasse geben und dann über die klasse selektieren oder das elternelement aufrufen
(über eine einzelne ID) und dann die kindelemente wählen
oder jedem element ne eigene einzelne ID geben und dann alle selektieren..
variante 2 denke ich sollte die gängiste sein, da ne gemeinsame klasse bei verschiedenen elementen doch arg verwirren würde

Shyne

Also mal abgesehen davon; ich denke kaum daß der Fehler davon abhängig ist. Ich bin grad bisschen verwirrt, weil ich mir überhaupt nicht vorstellen kann, woran es liegen könnte.

Ich bringe mein Problem mal auf dem Punkt.

Code

<script>
  $(document).ready(function(){

    $("div#div1").mouseover(function () {
      $(document.getElementById('div1')).fadeTo("normal", 0.33);
    });
    $("div#div1").mouseout(function () {
      $(document.getElementById('div1')).fadeTo("normal", 1.00);
    });
  });
  </script>
...
<a href="#">
<div id="div1" class="fvbox">
<br />
<img src="images/smilies/smile" /> Text <br />
<img src="images/smilies/smile2" />  Text
</div>
</a>

Alles anzeigen

Fahre ich mit der Maus über dem Div bekomme ich einen Effekt. Fahre ich IN DEM DIV über ein <img> bekomme ich ebenfalls einen Effekt (Mouseout / Mouseover).

Ich möchte keinen "Doppelteffekt" haben, sondern alle Tags die sich in dem DIV befinden, sollen sich integrieren können. Deshalb dachte ich, daß ich für alle Tags die selbe ID brauche, damit ich nur EINEN mouseover-event erzeuge. Aber scheinbar ist das doch nicht die Lösung.

Kommt jemand nach wie ich es meine?

synaptic

also ich würd aktuell mal vermuten, dass des javascript beim überfahren des bildes automatisch nen mouseout macht, weil nen mouseover übers bild geschieht...

also du willst jetzt bei dem div nen mouseover haben und bei den bilder nich oder wie?

Shyne

Zitat von synaptic

also du willst jetzt bei dem div nen mouseover haben und bei den bilder nich oder wie?

Genau!
Die Bilder gehören ja in dem Div rein. Es reicht mir wenn das Script nur auf den Div reagiert und nicht auf jedes Element, das sich innerhalb des Divs befindet.

synaptic

dann probiere es mal so:

Code

<script type="text/javascript">
$(document).ready(function(){
    $("#div1.fvbox").mouseover(function () {
      $(this).fadeTo("normal", 0.33);
    });
    $("#div1.fvbox").mouseout(function () {
      $(this).fadeTo("normal", 1.00);
    });
  });


</script>

Alles anzeigen

edit. nee da macht es den effekt aus den von mir genannten gründen auch doppelt..^^
sah auf den ersten blick aus, als wäre es des...

Shyne

Hatte ich auch schon ausprobiert

Gibt es dafür überhaupt eine Lösung frage ich mich oder ist das ein Fehler von jQuery?

synaptic

mmh also ich hab mir grad gedacht ich mach einfach nen div was des div1 überlappt und den gesamten platz überdeckt (stichwort z-index)

aber auch das hat nich gefruchtet...
ich geb jetzt mal den bildern auch nen z-index.. ma gucken was passiert

edit: nee is der gleiche scheiss in grün..
muss gestehen ich hab akut echt keinen plan mehr

Shyne

Ich habe mal statt mouseover, hover verwendet. Das Blöde ist nur, sobald ich auf ein Bild komme, blendet sich der Effekt aus.

synaptic

also ich habs jetzt im ff und ie gecheckt..
das problem ist wie oben bereits geschrieben,... und liegt generell beim javascript!
du hast nen container auf den des mousover und mouseout gelegt wird, sobald du über nen innenliegendes element fährst wird die mouseout-funktion gemacht und direkt danach mouseover, weil man ja 2noch " überm element is...

musste dir was anderes überlegen... zb den effekt vom div auf nen mouseover der bilder legen..

Shyne

Wie meinst du das mit "den effekt vom div auf nen mouseover der bilder legen"?

Ich möchte ja den Div als Effekt haben und nicht die Bilder.

synaptic

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


<head>
<title>externe galerie</title>
<style type="text/css">
.fvbox{
padding:30px;
border: 1px solid red;
width:670px;
position:absolute;
z-index:3;
top:0;
left:0;
}
#tricky{
border:2px solid green;
position:absolute;
z-index:2;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">


$(document).ready(function(){
    $("#tricky").mouseover(function () {
      $("#div1.fvbox").fadeTo("normal", 0.33);
    });
    $("#tricky").mouseout(function () {
      $("#div1.fvbox").fadeTo("normal", 1.00);
    });
  });


</script>
</head>
<body>
    <div id="div1" class="fvbox" >
        <div id="tricky">
        </div>

        <br />
                <img src="1000dank.png" /> Text <br />
                <img src="fellnasen_danke.png" />  Text

    </div>


</body>
</html>

Alles anzeigen

so haste jetzt die divs übereinander und sei dir gewiss.. so kannste NIX im DIV anklicken....

Shyne

Das ist genau das was ich wollte! Aber nur ergibt sich das Problem daß es im Internet Explorer nicht läuft

synaptic

ei dann teste doch ma ein wenig rum..