2009-03-13 20 views
2

Need: Finden Sie eine Möglichkeit, ein gültiges Tag/Attribut/Eigenschaft zu einem normalen HTML-Steuerelement hinzuzufügen.Html/Javascript: Hinzufügen von Attribut zu einem HTML-Steuerelement

Was ich habe, ist einige javascript/jquery Hinzufügen eines click-Ereignisses zu einem Link, der ein div ein- oder ausblenden wird. Die Idee ist, dies mit $ (document) .ready und einer anonymen Methode zu tun, um die von onClick aufgerufene Methode beim Laden der Seite zu erstellen. Wenn Sie darauf klicken, wird ein Div mit etwas Text angezeigt. Das ist alles gut und gut, außer ich kann nicht herausfinden, wie man den Text so einrichtet, dass dies beim Laden der Seite getan werden kann. Was ich möchte, ist so etwas wie:

<a href="..." class="showItLink" textToShow="This is the text to show">HI</a> 

, so dass ich das tun kann:

$(document).ready 
(
    function() 
    { 
    $("..showItLink").click 
    (
     function(event) 
     { 
     var containerPosition; 
     var createdDiv; 

     //see if the div already exists 
     createdDiv = $(this).children(".postComment"); 

     if (createdDiv.length == 0) 
     { 
      //This is where the attribute is used so that the CreateDiv 
      //method can take the textToShow and fill the div's innerText 
      //with it     V V V V V V 
      createdDiv = CreateDiv(this.textToShow, "postComment"); 
      $(this).append(createdDiv); 
      $(this).children(".postComment").hide(); 
     } 

     $(createdDiv).toggle(); 
     event.preventDefault(); 
     } 
    ); 
    } 
); 

nun neben nicht xhtml valid (meh), das funktioniert nur im IE zu sein. Firefox sagt nur, dass es nicht existiert. (this.textToShow) Ich könnte etwas wie rel oder rev benutzen, aber das scheint genauso hackisch zu sein. Ich habe mich gefragt, ob es eine gültige Methode dafür gibt.

Lösung von Antwort unten

comment = $(".showItLink").attr("comment"); 
... 
createdDiv = CreateDiv(comment, "postComment"); 

Gepaart mit:

<a href="http://www.theironical.com" class="showItLink" comment="hihihi" >HI</a> 

Antwort

3

Wenn Sie JQuery verwenden, müssen Sie nur die Attribute mit .attr() abrufen und festlegen.

Get: this.attr ("textToShow")

Set: this.attr ("textToShow", Wert)

+0

Dies funktioniert und sieht aus wie der beste Weg, es zu tun. bedeutet immer noch, dass ich die XHTML-Gültigkeit brechen muss, aber ich bin mir nicht sicher, ob ich noch weinen werde ... –

+0

Ich würde persönlich von XHTML wegziehen. Ich ging zurück zu HTML 4, bis HTML 5 herauskam. –

+0

Es hat nichts mit XML zu tun, ein 'textToShow'-Attribut ist in Legacy-HTML genau so ungültig wie in XHTML. – bobince

0

Der beste Weg, diese Art der Sache zu tun ist, um den Text in einem anderen Element zu verstecken und dann Toggle dieses Element. so etwas wie dieses versuchen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>clear test</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#show-it").click(function() { 
        $("#message").toggle(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div> 
      <a id="show-it" href="javascript:void(0);">show it</a> 
      <div id="message" style="display:none;"> hidden message</div> 
      hello world 
     </div> 
    </body> 
</html> 
2

Die Art und Weise Sie ein Attribut ein HTML-Steuerelement hinzufügen, wird unter Verwendung der element.setAttribute („attribute“, „attribute“), in dem „Element“ ist das Element, das Sie hinzufügen möchten das Attribut zu.

Um ein Attribut zu erhalten, verwenden Sie getAttribute ("attributeName");

2

Sie nicht weg Attribute mit dem Hinzufügen von benutzerdefinierten bekommen können Elemente, während noch in HTML zu sein gültig. Es funktioniert im Allgemeinen in aktuellen Browsern, aber es ist etwas fragil, wenn Sie einen Namen auswählen, der (jetzt oder in Zukunft) als HTML- oder JavaScript-Eigenschaft von einem beliebigen Browser verwendet wird. Der Konflikt verhindert, dass er funktioniert .

HTML5 schlägt Attribute vor, deren Namen mit "data-" als gültige Erweiterungsmechanismen beginnen. Sie könnten auch namespaced Elemente in XHTML betrachten; Dies ist technisch gesehen noch immer nicht "gültiges XHTML", aber zumindest ist es sicher vor Kollisionen.

< a href = "..." class = "showItLink" textToShow = "Dies ist der Text für"> HALLO

Ich schlage vor, mit dem 'title' Attribute für diesen speziellen Zweck .

+0

Meinst du sowas wie class = "showToLink"? Xmlns: comment = "Dies ist der anzuzeigende Text?" Problem mit dem Titel ist, dass es immer noch etwas für etwas verwendet, was es nicht ist ... ganz zu schweigen davon, dass es beim Schweben auftaucht. –

+0

Wenn ich auf "Hover" trete, habe ich genau den Titel für dieses Beispiel gewählt - es ist ein vernünftiges Verhalten für den Link, wenn man den Mauszeiger darüber bewegt und den Text dort platziert, wo Suchmaschinen ihn sehen können. Offensichtlich wäre "Titel" keine umfassende Lösung für alle Arten von Wertübergabe an Skripte. – bobince

0

Wenn Ihr textToShow-Attribut eine expando-Eigenschaft wäre, würde this.textToShow nicht undefiniert zurückgeben, aber da es ein benutzerdefiniertes Attribut ist, müssen Sie jQuery verwenden.attr ("textToShow") oder das Standard-DOM this.getAttribute ("textToShow").

Verwandte Themen