Добавить дополнительную информацию (мета) к элементам HTML

0

У меня есть много элементов HTML (например, кнопок), которые все делают то же самое при нажатии, но мне нужен идентификатор каждого элемента для события. Есть ли хороший способ хранить информацию, поэтому мой скрипт может определить, какая кнопка точно нажата?

Мой код выглядит примерно так:

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function() {
    $('.myButtons').click(function() {
        var id = // the id of the button
        // do stuff with the id
    });
    }); 
    </script>
</head> class='default'
<body>
<input type='button' class='myButtons' value='Button Id 1' />
<input type='button' class='myButtons' value='Button Id 2' />
<!-- lots more ... -->
</body>
</html>

Если я сохраню его как число в id или class -attribut, я не буду уверен, что элемент уникален, а id/class не будет очень информативным. Если вы сохраните его как комбинацию ярлыка и идентификатора, например button14, мне нужно будет разобрать строку перед получением идентификатора. Это не очень хороший способ сделать это.

Теги:
metadata

2 ответа

3
Лучший ответ

Используйте атрибут данных HTML5 для хранения этой информации, например:

<input type='button' class='myButtons' value='Button Id 1' data-my-id="foo" />
<input type='button' class='myButtons' value='Button Id 2' data-my-id="bar" />

И прочитайте атрибут с помощью

$('.myButtons').click(function() {
    var id = this.getAttribute("data-my-id");
});

Вместо getAttribute вы можете, конечно, использовать jQuery, если хотите:

var id = $(this).attr("data-my-id");
Поделиться
  • 1
    +1 Отлично. @Frithjof: К вашему сведению, вы можете попросить людей использовать .data для получения информации. Это работает , используйте его, если хотите, но это вводит в заблуждение и ассиметрично, внимательно прочитайте документацию к data чтобы понять, почему вы знаете, что используете, если решите пойти по этому пути.
  • 0
    @TJCrowder: Спасибо. Я рассмотрел упоминание .data и что он ничего не предлагает в этом случае, но решил просто позволить ему скользить. Честно говоря, я бы предпочел, чтобы .data вообще не имел такого магического поведения.
Показать ещё 2 комментария
-2

или вы можете транжировать что-то вроде этого

$(function(){
    $(".myButtons").click(function() {
        alert($(this).attr("value"));
    });
});
Поделиться
  • 0
    Это вернет отображаемую метку кнопки, но имя может быть совершенно случайным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню