Html / Javascript: добавление атрибута в элемент управления HTML - PullRequest
Новая
       11

Html / Javascript: добавление атрибута в элемент управления HTML

2 голосов
/ 13 марта 2009

Необходимость: найти способ добавить действительный тег / атрибут / свойство в обычный элемент управления html.

У меня есть какой-то javascript / jquery, добавляющий событие click к ссылке, которая будет показывать или скрывать div. Идея состоит в том, чтобы сделать это, используя $ (document) .ready и анонимный метод, чтобы создать метод, вызываемый onClick при загрузке страницы. При нажатии на элемент div будет показан текст. Это все хорошо, за исключением того, что я не могу понять, как настроить текст, чтобы это можно было сделать при загрузке страницы. Я хотел бы что-то вроде: 

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

так что я могу сделать это: 

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

Теперь, помимо того, что xhtml не действителен (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>

Ответы [ 5 ]

3 голосов
/ 13 марта 2009

Если вы используете JQuery, просто получите и установите атрибуты с помощью .attr ().

Получить: this.attr ("textToShow")

Set: this.attr ("textToShow", значение)

2 голосов
/ 14 марта 2009

Вы не можете избежать добавления пользовательских атрибутов в элементы HTML, оставаясь при этом действительными. Как правило, он будет работать в текущих браузерах, но он немного хрупок в том смысле, что если вам случится выбрать имя, которое используется (сейчас или в будущем) в качестве свойства HTML или JavaScript любым браузером, конфликт остановит его работу .

HTML5 предлагает атрибуты, имена которых начинаются с «data-» в качестве допустимых механизмов расширения. Вы также можете рассмотреть элементы пространства имен в XHTML; технически это все еще не является «действительным XHTML» DTD, но, по крайней мере, оно безопасно от столкновений.

HI

Я предлагаю использовать атрибут «title» для этой конкретной цели.

2 голосов
/ 13 марта 2009

Способ добавления атрибута в элемент управления html заключается в использовании element.setAttribute ("attributeName", "attributeValue") где "element" - это элемент, к которому вы хотите добавить атрибут.

Для получения атрибута вы используете getAttribute ("attributeName");

0 голосов
/ 14 марта 2009

Если ваш атрибут textToShow был свойством expando, this.textToShow не возвращал бы неопределенный, но так как это пользовательский атрибут, вам нужно использовать this.attr ("textToShow") в jQuery или стандартный DOM this.getAttribute (DOM) "textToShow").

0 голосов
/ 13 марта 2009

Лучший способ сделать это - скрыть текст в другом элементе, а затем переключить этот элемент. Попробуйте что-то вроде этого: 

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