All geek questions in one place

Html / Javascript: Add attribute to HTML control

Necessity: find a way to add the correct tag / attribute / property to a regular html control.

I have javascript / jquery adding a click event to a link that will show or hide the div. The idea is to do this using $ (document) .ready and an anonymous method to create a method called onClick when the page loads. Clicking on the div will display the text. This is all good and good, except that I cannot figure out how to adjust the text so that it can be done when the page loads. I would like something like:

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

so that I can do this:

$(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 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();
      }
    );
  }
);

, xhtml valid (meh), IE. Firefox , . (this.textToShow) - rel rev, . , .

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

:

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

JQuery, .attr().

Get: this.attr( "textToShow" )

Set: this.attr( "textToShow", )

+3

html element.setAttribute( "attributeName", "attributeValue" ), "element" - , .

, getAttribute ( "attributeName" );

+2

HTML-, . , , , , ( ) HTML JavaScript , .

HTML5 , "data-" . XHTML; - " XHTML" DTD, .

< a href= "..." class= "showItLink" textToShow = " " > HI

title .

+2

- , . - :

<!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>
0

If your textToShow attribute was an expando property, then this.textToShow will not return undefined, but since this is a custom attribute, you need to use jQuery this.attr ("textToShow") or the standard DOM. GetAttribute ("textToShow").

0
source

Source: https://habr.com/ru/post/1725087/

More articles:


All Articles