Лучший способ для нескольких ссылок привязки ссылаться на одно значение, которое можно использовать в JavaScript

Question

У меня есть любое количество якорных ссылок на странице, которые должны выполнять один и тот же блок кода JavaScript при нажатии, и этот код должен быть связан с одним значением. Есть несколько из них на каждой странице. Я обычно использую скрытый ввод для хранения значения в соотношении один к одному, но как лучше связать несколько ссылок, размещенных на странице, со значением?

Например, представьте группу ссылок, которые ссылаются на продукт по идентификатору, и все они показывают один и тот же динамический слой для продукта. Теперь может быть несколько групп ссылок для нескольких продуктов. Как мне нарисовать эти ассоциации? Я использую Mootools и связываю события по классам, поэтому я не хочу кучу вызовов функций встроенных событий, которые передают аргументы.

Answer 1

Если вы уже используете Mootools, хороший способ сделать это - использовать хранилище данных элемента .

window.addEvent('domready', function() {
  $$('a.classname').each(function(el) {
    el.store('productID', /*get this however you want*/);

    el.addEvent('click', function(e) {
      var productID = el.retrieve('productID');
    }
  }
}

И вот один из способов получения идентификаторов продуктов (при условии, что у вас есть контроль над форматированием URL):

<a href='ViewProduct.php?ProductID=7#pid:7'>link</a>

//in your js (above)
var pid = el.get('href').split('#')[1].split(':')[1];
el.store('productID', pid);

Answer 2

Хотите установить значения в своем HTML-коде? В противном случае вы можете динамически добавлять значения к самим узлам dom.

Если вы хотите установить их в html, используйте пользовательский атрибут, если вас не интересует стандартное соответствие. Если вам не все равно, закодируйте значения как имена классов или используйте lang -атрибут и добавьте префикс «x-» к вашим данным, чтобы вы оставались совместимыми с RFC 1766.