Kein Resultat bei jQuery-binding, aber auch keine Fehlermeldung

[Enrico]

Hallo,

ich bin derzeit dabei, mich in jQuery einzuarbeiten.

Ich möchte mittels jQuery events an Bilddateien binden, da ich mit diesen events arbeiten werde (verfügbar machen, Attribute ändern,...).

Allerdings stehe ich vor dem Problem, dass die Anbindungen scheinbar korrekt gemacht werden, allerdings bekomme ich im Browser keine Ergebnisse (in diesem Fall einen Bildwechsel mit Hand-Cursor bei mouseover), bekomme aber keine Fehlermeldung in der Fehlerkonsole von Firefox.

Im head-bereich binde ich zunächst jQuery ein und definiere nachfolgend die Anweisungen:

  
<script type="text/javascript" language="javascript" src="../JS/jQuery.js"></script>  
<script type="text/javascript" language="javascript">  
  
$(document).ready(function()  
{  
   var Rubriken = new Array ("Startseite", "WirUeberUns", "Ruestzeug", "Waffen", "Gewandung", "Lederzeug", "Sonstiges", "Informationen", "Warenkorb");  
  
   for (var i = 0; i < 9; i++)  
   {  
      $('#Rubrik' + Rubriken[i] + '_img').bind('mouseover', function()  
      {  
         $('#Rubrik' + Rubriken[i] + '_img').attr('src', '../GRAFIKEN/ButtonRubrik' + Rubriken[i] + '1.png');  
         $('#Rubrik' + Rubriken[i] + '_img').css({'cursor': 'pointer'});  
      });  
  
      $('#Rubrik' + Rubriken[i] + '_img').bind('mouseout', function()  
      {  
         $('#Rubrik' + Rubriken[i] + '_img').attr('src', '../GRAFIKEN/ButtonRubrik' + Rubriken[i] + '0.png');  
      });  
  
      $('#Rubrik' + Rubriken[i] + '_img').bind('click', function()  
      {  
  
      });  
   }  
});  
  
</script>  

Die einzelnen Ausgangsgrafiken sind alle nach folgendem Muster aufgebaut:

  
<img id="RubrikStartseite_img" src="../GRAFIKEN/ButtonRubrikStartseite0.png">  
<img id="RubrikWirUeberUns_img" src="../GRAFIKEN/ButtonRubrikWirUeberUns0.png">  
<img id="RubrikRuestzeug_img" src="../GRAFIKEN/ButtonRubrikRuestzeug0.png">  

Warum bekomme ich im Browser keine entsprechenden Resultate?

Vielen Dank für eure Hilfe.

Gruß
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

<script type="text/javascript" language="javascript" src="../JS/jQuery.js"></script>
<script type="text/javascript" language="javascript">

Das @language-Attribut war hierfür noch nie sinnvoll. Je nach Doctype ist es auch falsch. Und in HTML5 ist auch @type nicht mehr erforderlich.

for (var i = 0; i < 9; i++)
   {
      $('#Rubrik' + Rubriken[i] + '_img').bind('mouseover', function()
      {
         $('#Rubrik' + Rubriken[i] + '_img').attr('src', '../GRAFIKEN/ButtonRubrik' + Rubriken[i] + '1.png');
         $('#Rubrik' + Rubriken[i] + '_img').css({'cursor': 'pointer'});
      });

Was soll das denn? Wozu JavaScript für die cursor-Eigenschaft? OMG

Setze cursor mit CSS!

Und wenn die Bilder Hintergrundbilder sind, brauchst du auch für den Bildwechsel kein JavaScript.

Qapla'

[Enrico]

Hallo Gunnar,

danke für Deine Antwort.

OK, ich baue den Code neu auf und mache u.a. den Grafikwechsel mittels background-position.

Dennoch brauche ich die korrekte Zuordnung der events.

Was habe ich beim jQuery-Code falsch gemacht?

Gruß
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

Dennoch brauche ich die korrekte Zuordnung der events.

Wozu?

Was habe ich beim jQuery-Code falsch gemacht?

Du verwendest bind() anstatt on().

Du verwendest innerhalb der Schleife $('#Rubrik' + Rubriken[i] + '_img') anstatt $(this).

Qapla'

[Enrico]

Hallo Gunnar,

Wozu?

Die Grafiken werden Teil eines Aufklappmenüs und stellen die Oberpunkte dar, nach deren Anklicken das entsprechende Untermenü angezeigt wird:

• Dieses eine Untermenü wird angezeigt
• Ein eventuell bereits geöffnetes Untermenü wird geschlossen
• Der Oberpunkt soll bei geöffnetem Untermenü kein Link mehr sein (Entfernung mit "unbind()") und erst durch Anklicken eines anderen Oberpunktes wieder zum Link werden ("bind()")

Gruß
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

Die Grafiken werden Teil eines Aufklappmenüs

Eine Navigation, die nur mit JavaScript funktioniert? Also für einige (wichtige!!) Clients gar nicht?

Aber davon scheinst du ja inzwischen abgekommen zu sein. Gut so.

Grafiken? Du denkst hoffentlich an die zwingend notwendigen Alternativtexte?

Oder anders: Deine Menüpunkte bestehen aus ganz normalem Text, keinen img-Elementen. Für die Grafiken verwendest du Image-Replacement-Techniken [Meiert, CSS-Tricks], am besten aus letzterer Quelle eine der 2012er.

Qapla'