Kann jemand bitte Hilfe mit diesem Jquery-Code

Ich habe versucht, diesen Code für eine Weile zu arbeiten, und kann nicht herausfinden, was falsch ist. Es ist für einen Tri State Rollover mit Bildern. (Ich weiß, dass ich das mit CSS machen kann, also bitte beantworte das nicht.) Das Ziel ist, ich versuche, JQuery zu lernen und als Teil des Lernens versuche ich herauszufinden, was mir hier fehlt.Kann jemand bitte Hilfe mit diesem Jquery-Code

Worauf ich Probleme habe, ist, wenn Sie die mouseover und mouseout Ereignisse die Tasten richtig hervorheben. Wenn ich jedoch auf eine Schaltfläche klicke und auf eine andere Schaltfläche klicke, bleiben alle Schaltflächen, auf die ich klicke, aktiviert. Ich muss in der Lage sein, den Ein-Zustand wie beim Klicken auf jedes Bild wie ein typisches Tab-Steuerelement zu aktivieren.

Ich weiß, dass es bessere Möglichkeiten gibt, dies zu tun, aber ich versuche wirklich zu lernen, was ich falsch gemacht habe, und ich bin extrem frustriert. Also, wenn es jemanden gibt, der helfen kann, den Code, den ich poste, zu reparieren, würde ich das wirklich schätzen. Wiederum weiß ich, dass dies mit bestimmten CSS-Techniken erreicht werden könnte, aber ich würde gerne verstehen, was ich hier falsch mache.

Vielen Dank im Voraus.

$(document).ready(function() { 
var clicked_obj; 
    $("#nav a").mouseover(function() { 
     if ($(this).data("clicked")) { return; } 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_off.gif$/ig,"_on.gif"); 
     }); 
    }).mouseout(function() { 
     if ($(this).data("clicked")) { return; } 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_on.gif$/ig,"_off.gif"); 
     }); 
    }).click(function() { 
     if (clicked_obj) { 
      $(clicked_obj).removeData("clicked").mouseout(); 
     } 
     clicked_obj = this; 
     $(this).data("clicked", true); 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_off.gif$/ig,"_clk.gif"); 
     }); 
    }); 

}); 


</script> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 
    <body> 
     <div id="nav"> 
      <div id="logo"><img src="images/inbox_wrilogo.gif" width="143" height="30" alt="logo" border="0" /></div> 
      <div id="tab"><a href="#"><img src="images/nav_support_off.gif" width="75" height="22" alt="Support" name="support" border="0"/></a></div> 
      <div id="tab"><a href="#"><img src="images/nav_acct_off.gif" width="75" height="22" alt="My Account" name="acct" border="0" /></a></div> 
      <div id="tab"><a href="#"><img src="images/nav_inbox_off.gif" width="75" height="22" alt="Inbox" name="inbox" border="0" /></a></div> 
     </div> 
    </body> 
</html>

Quelle

2009-07-31 Rob

Willkommen bei Stackoverflow, ist es ratsam, Ihren Thementitel in Form einer Frage zu stellen . Je spezifischer, desto besser. –

Haben Sie Fehler? Was sind Sie? –

Wir müssen den HTML-Code sehen, um zu verstehen, was hier vor sich geht. – SolutionYogi

Sie haben genau das zu tun, was Sie denken, sollten Sie tun :) (die Schönheit der jquery:) ... entfernen Sie den ausgewählten Zustand aus der zuvor geklickt Taste, wenn Sie auf einem neuen klicken .... hier ist eine Version, die Stile anstelle von Bildern verwendet, aber man sollte das Add ändern können,/entfernen Klasse ändern der Bilder

var sel; 
$(document).ready(function() { 
    $("#nav a") 
    .mouseover(function() { 
     $(this).addClass("mouseOver"); 
    }) 
    .mouseout(function() { 
     $(this).removeClass("mouseOver"); 
    }) 
    .click(function() { 
     if(sel != null) { 
      $(sel).removeClass("selected"); 
     } 
     $(this).addClass("selected"); 
     sel = this; 
    }); 
});

Quelle

2009-07-31 21:59:11 Jaime

Das ist so ziemlich alles. –

können Sie mir ein Beispiel geben, wie Sie Bilder verwenden würden. Ich versuche mehrere und ich bin nicht in der Lage, es so zu arbeiten, wie ich es möchte. – Rob

Kann jemand bitte Hilfe mit diesem Jquery-Code

Antwort

Verwandte Themen