Передача аргументов и значений из HTML в jQuery (события)

Question

Какова практика передачи аргументов из HTML в функцию событий jQuery. Например, получить идентификатор строки из db:

<tr class="jq_killMe" id="thisItemId-id">
 ...
</tr>

и jQuery:

$(".jq_killMe").click(function () {
     var tmp = $(this).attr('id).split("-");
     var id = tmp[0]
     // ...
}

Какая лучшая практика, если я хочу передать более одного аргумента? Лучше не использовать JQuery? Например:

<tr onclick="killMe('id')">
 ...
</tr>

Я не нашел ответа на свой вопрос, буду рад даже за ссылки. Благодаря.

Редактировать (предварительное решение)

Итак, вы предложили два способа сделать это:

1. Добавление пользовательских атрибутов для элемента (XHTML)
2. Использовать идентификатор атрибута и анализировать его по регулярному выражению
3. Атрибут data- * атрибутов в HTML5
4. Использовать скрытые дочерние элементы

Мне нравится первое решение, но ... Я хотел бы (я должен (работодатель)) создать действительный код. Вот хороший вопрос и ответы:
Так что, если пользовательские атрибуты HTML не являются допустимыми XHTML?

И второй не такой красивый, как первый, но действительный. Таким образом, компромисс ...

Третье - решение на будущее, но здесь много CMS, где мы должны использовать XHTML или HTML4. (А HTML5 - это долгий процесс)

Answer 1

А что насчет вложенных элементов?

<style type="text/css">
  .data {display: none}
</style>

<tr class="jq_killMe">
   <span id="data-id" class="data">my id</span>
   <span id="data-name" class="data">answer</span>
   ...
</tr>

Но есть несколько вопросов:

• Так ли это безопасно с точки зрения доступности?
• Как процент пользователей отключил css?

Редактировать

Лучше использовать <input type="hidden" />

<tr class="jq_killMe">
   <input type="hidden" name="data-id" value="my id" />
   <input type="hidden" name="data-name" value="answer" />
   ...
</tr>

и jQuery выглядит так

$(".jq_killMe").click(function() {
    var id = $(this).children("input[name='data-id']");
    //...
});

Answer 2

Самый простой способ сделать это - поместить информацию в пользовательские атрибуты, например так:

<tr class="jq_killMe" id="thisItemId-id" itemId="42" itemName="Answer">
 ...
</tr>

$(".jq_killMe").click(function () {
     var id = $(this).attr('itemId');
     var name = $(this).attr('itemName');
     // ...
}

Не забудьте правильно экранировать значения , чтобы предотвратить XSS.

Answer 3

Вы можете выбирать между различными способами в зависимости от того, сколько параметров вам может понадобиться. Если вам просто нужно более одного, вы можете добавить пользовательские атрибуты, но они могут не соответствовать html.

Иногда вам даже может понадобиться встроить значения в идентификатор, как вы делаете:

<tr class="jq_killMe" id="thisItemId-id">

Но я бы сделал это так:

<tr class="jq_killMe" id="thisItemId1">

где 1 - ваш идентификатор, а затем используйте RegEx вместо разделения:

$(".jq_killMe").click(function () {
     var fullid= $(this).attr('id);
     // do Regex here to either replace or match anything that follows 'thisItemId'
}

Answer 4

Другой вариант - предоставить данные через скрипт, а затем использовать идентификатор строки для их поиска.

, например

<script>
 var MyData = {
  table: [
   { name: "John", age: 20 },
   { name: "Jane", age: 40 }
  ]
 }
</script>

, затем ищите данные со следующим:

$(".jq_killMe").click(function () {
 var tmp = $(this).attr('id').split("-");
 var id = tmp[0];
 var data = MyData.table[id];
 // ...
}

Answer 5

Это зависит от контекста.Выразите данные наиболее семантически подходящим способом.

Может использоваться класс.Он может использовать данные в ячейке в строке.Он может использовать данные в атрибуте элемента в ячейке (например, URI в href привязки).

Не существует универсального решения, которое всегда лучше.