MAIS

    [Jquery] – Como recuperar dados através de data atributos ou data attribute

    - Anúncio -
    - Anúncio -

    Para você economizar em códigos e seu otimizar seu html, podemos definir links através de data atributos ou data attribute.

    Como recuperar parametros em data atributos?

    Através da biblioteca jQuery conseguimos recuperar qualquer data atributos de uma determinada classe ou ID.

    Vamos utilizar um exemplo onde substituiremos a tag <a> por um data atributo.
    Utilizando a tag <a>:

    <div id="links">
    <ul>
    <li><a href="#link1" class="link">Link 1<a/></li>
    <li><a href="#link2" class="link">Link 2<a/></li>
    <li><a href="#link3" class="link">Link 3<a/></li>
    <li><a href="#link4" class="link">Link 4<a/></li>
    <li><a href="#link5" class="link">Link 5<a/></li>
    </ul>
    </div>

     

    Agora vamos criar o mesmo código utilizando o data atributo:

    <div id="links">
    <ul>
    <li class="link" data-url="#link1">Link 1</li>
    <li class="link" data-url="#link2">Link 2</li>
    <li class="link" data-url="#link3">Link 3</li>
    <li class="link" data-url="#link4">Link 4</li>
    <li class="link" data-url="#link5">Link 5</li>
    </ul>
    </div>

     

    coloque antes de fechar a tag </body> seu código jquery para funcionar os links.

    jQuery( document ).ready(function() {
    		jQuery(".link").click(function(){
       				    window.location = jQuery(this).attr("data-url");
      				    return false;
    		});
    });

     

    Isso vale para qualqer atributo, porém sempre devemos utilizar o nome sem ascentos e inciando com “data-”

    para recuperar de uma determinada classe podemos usar o

    var atributo;
    atributo = jQuery('.suaclasse').attr("data-nomedoseuatributo");

     

     

     

    - Anúncio -

    Artigos recentes

    Continue lendo

    DEIXE UMA RESPOSTA

    Please enter your comment!
    Please enter your name here

    Stay on op - Ge the daily news in your inbox