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

Необходимость: найти способ добавить действительный тег/атрибут/свойство к обычному элементу управления 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 недействителен (мех), это работает только в 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>

javascript dynamic jquery
person Programmin Tool    schedule 13.03.2009    source источник

Ответы (5)


arrow_upward
3
arrow_downward

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

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

Установить: this.attr("textToShow", значение)

person Jeremy L    schedule 13.03.2009
comment
Это работает и выглядит как лучший способ сделать это. все еще означает, что я должен нарушить достоверность xhtml, но не уверен, что буду плакать... - person Programmin Tool; 13.03.2009
comment
Лично я бы отказался от XHTML. Я вернулся к HTML 4, пока не вышел HTML 5. - person Jeremy L; 14.03.2009
comment
Это не имеет ничего общего с XML, атрибут textToShow точно так же недействителен в устаревшем HTML, как и в XHTML. - person bobince; 14.03.2009
comment
Справедливости ради, это хак, как бы я ни пытался на это смотреть. - person Programmin Tool; 16.03.2009

arrow_upward
2
arrow_downward

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

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

person Jaime Garcia    schedule 13.03.2009

arrow_upward
2
arrow_downward

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

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

‹a href="..." class="showItLink" textToShow="Это текст для отображения">Привет

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

person bobince    schedule 14.03.2009
comment
Вы имеете в виду что-то вроде class=showToLink xmlns:comment=Это текст для отображения? Проблема с заголовком в том, что он все еще использует что-то для чего-то, чем он не является... не говоря уже о том, что он появляется при наведении курсора. - person Programmin Tool; 16.03.2009
comment
Под «пространством имен» я подразумеваю что-то вроде ‹a ... myns:comment=...›, где myns объявлен в корневом элементе, и вам придется расширить DTD, чтобы сделать его «действительным для всего» (хотя все еще не « действительный XHTML' точно). - person bobince; 17.03.2009
comment
Отображение при наведении — именно поэтому я выбрал «заголовок» для этого примера — это разумное поведение ссылки, когда вы наводите на нее курсор, и размещает текст там, где его могут видеть поисковые системы. Очевидно, что «заголовок» не будет универсальным решением для всех типов передачи значений в скрипты. - person bobince; 17.03.2009

arrow_upward
0
arrow_downward

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

<!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>
person Andrew Hare    schedule 13.03.2009

arrow_upward
0
arrow_downward

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

person nickytonline    schedule 14.03.2009