Получить значение из другого элемента при создании обработчика события

Question

У меня есть ряд скрытых элементов contactID, перечисленных на странице, и я назначил обработчик событий для ближайшего якоря (при щелчке якоря появляется профиль контакта).Я хочу иметь возможность передавать значение элемента HIDDEN при создании обработчика событий (привязка может быть не рядом с элементом HIDDEN, поэтому я не хочу проходить через DOM).

<input type="hidden" name="first-contact" id="first-contact" value="1" />
<.. code ..>
<a href="#" class="contact-viewer">View contact</a>

<input type="hidden" name="second-contact" id="second-contact" value="4" />
<.. code ..>
<a href="#" class="contact-viewer">View contact</a>

В настоящее время я делаю это, помещая тег ID элемента HIDDEN в атрибут REL привязки и получая значение REL при запуске моего события.

<a href="#" class="contact-viewer" rel="second-contact">View contact</a>

Это работает хорошо, но это простоне чувствую себя хорошо (я чувствую, что использование REL это хак).Есть ли лучший способ сделать это?

Answer 1

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

Если доступны сценарии, получите значение из href , отмените навигацию и завершите запрос, используя XHR или любой другой.

Если вы не хотите использовать ссылку в качестве ссылки, используйте кнопку. Ссылки выводят навигацию на другую страницу, кнопки выводят процесс, который останется на той же странице.

Answer 2

Идеальный подход состоит в том, чтобы указать отношения посредством группировки элементов HTML вместе (например, обтекание в <div>), а затем использовать обход родительского / дочернего DOM.

Однако, если это не может быть сделано, то подход, который вы используете, является хорошим. Единственная проблема, о которой вы упомянули, - это использование атрибута rel. В HTML5 вам разрешено использовать data- атрибуты для этой цели:

<a href="#" class="contact-viewer" data-contact="first-contact">View contact</a>

Вы можете получить это значение в обработчике событий с помощью:

el.getAttribute('data-contact');

Дополнительная информация о пользовательских атрибутах данных здесь .