Назначение идентификаторов соответствующим образом в HTML - PullRequest
Новая
       13

Назначение идентификаторов соответствующим образом в HTML

1 голос
/ 08 июля 2011

Я новичок в jQuery (1,5 месяца) и обнаружил, что развиваю привычку PHP + jQuery, которая мне не особенно нравится.Мне интересно, есть ли у кого-нибудь предложения, чтобы сделать вещи более элегантными.Рассмотрим следующий HTML-код, который я сгенерировал, выполнив простой запрос SQL и повторив его с помощью PHP: 

<div id='boat_1' class='boat speedboat'></div>    
<div id='boat_2' class='boat dory'></div>
<div id='car_1' class='car racecar'></div>
<div id='car_2' class='car racecar'></div>

Как видите, я выбрал id соглашение об именах, следующее {type}_{id},Теперь, в jQuery, предположим, что я хочу привязать обработчик кликов к этим машинам делениям.Вспоминая, что они динамические и их может быть любое количество, я бы выполнил: 

$(".car").bind('click', function(){
//do something
});

Но, как правило, //do something хотел бы знать, на какой машине сработало событие щелчка.Кроме того, //do something, вероятно, потребуется разделить тип (лодка или автомобиль) и id для выполнения операции POST и записи в базу данных ... (например)

What I 'Сейчас я пытаюсь найти идентификатор (и другую уникальную информацию, которая мне нужна), но для меня это пахнет: 

$(".car").bind(function(){
var id = $(this).attr("id").replace("car_", "");
});

Можно вместо этого предложить использовать атрибут класса, потому что вы этого не делаетенадо беспокоиться об уникальности.Но поскольку имена классов не являются единичными (как я показал, их может быть больше одного), я не рассматриваю это как возможное решение.

Поскольку идентификаторы должны быть уникальными во всем документе,это решение, которое я выбрал.Я знаю, что getElementById () сломался бы, если бы стали возможными несколько идентификаторов с одним и тем же именем, но иногда я спрашиваю себя, будет ли полезно, если бы идентификаторы не были уникальными, если у них разные родители.

Какты делаешь это?

Должен ли я использовать HTML5 data-*?

Спасибо!

Ответы [ 4 ]

6 голосов
/ 08 июля 2011

Да.

Визуализируйте HTML следующим образом: 

<div data-id="1" class="boat speedboat"></div>    
<div data-id="2" class="boat dory"></div>
<div data-id="1" class="car racecar"></div>
<div data-id="2" class="car racecar"></div>

Jquery обработчик 

$(".car").bind(function(){
    var $this=$(this);
    var id = $this.data("id");
});

Функция данных Jquery

Начиная с jQuery 1.4.3, атрибуты данных HTML 5 будут автоматически добавлены в объект данных jQuery. Обработка атрибутов со встроенными черточками была изменена в jQuery 1.6 для соответствия спецификации W3C HTML5.

1 голос
/ 08 июля 2011

Я думаю, что ваш метод выглядит хорошо для того, что вы делаете, но я укажу, что в HTML 4 вы можете использовать атрибут rel, который практически не используется, но является допустимым HTML (поэтому он не будетзапускать предупреждения, такие как data-*, будут в HTML4-парсерах).Я использую его так же, как вы предложили использовать атрибут class, но без побочного эффекта от использования моих классов.

0 голосов
/ 08 июля 2011

Если честно, я бы так и сделал.

Однако я бы отфильтровал его и сделал бы функцию, подобную , этот парень правильно предложил и вытащил число из строки: 

function pullNumber(n) { 
  return n.replace(/[^0-9]/g, ''); }
0 голосов
/ 08 июля 2011

Что тебе не нравится в твоем методе? Я смотрю не на bind(), а на click(). Также, если вы хотите, вы можете связать классы и изменить свой //do something, чтобы вместо этого разделить идентификатор на _ и вернуть последний элемент [1] в массиве? :)

Ваш метод, похоже, подходит для получения числового идентификатора! :)

...