Melhor maneira para múltiplos âncora links para referência a um único valor que pode ser usado em JavaScript

Question

Não tenho qualquer número de links de âncora em uma página que precisa para executar o mesmo bloco de código JavaScript no clique, e que as necessidades de código a ser associado com um valor. Existem vários destes em cada página. Eu costumo usar uma entrada escondida para armazenar o valor em um relacionamento um-para-um, mas o que é a melhor maneira de vários links associados colocados em toda uma página com um valor?

Por exemplo, pense em um grupo de links que fazem referência a um produto por ID, e todos mostram a mesma camada dinâmica para o produto. Agora pode haver um vários grupos de ligações para um grupo de produtos. Como faço para desenhar essas associações? Estou usando Mootools e vincular eventos por classe, então eu não quero um monte de chamadas de função de eventos em linha que passam argumentos.

Answer 1

Se o seu já usando Mootools, uma boa maneira de fazer isso é usando dados do elemento armazenamento .

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');
    }
  }
}

E aqui está um método para a obtenção do productID (supondo que você tem controle sobre URL formatação):

<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

Você quer definir os valores no seu código html? Caso contrário, você pode adicionar dinamicamente os valores para os próprios nós dom.

Se você quiser colocá-las no html, use um atributo personalizado se você não se importa com o cumprimento das normas. Se você se importa, codificar os valores como nomes de classe ou usar o atributo lang e prefixo seus dados com 'X' para que fique compatível com a RFC 1766.