LOOP em tag li pra saber em qual Clicou!

rockbilly · Março 10, 2011

Hi everyone,

Tem alguma forma de criar uma função em javascript para saber que ao clicar em um objeto da tag 'li' eu pegue o nome do objeto? Eu consigo fazer isso chamando o evento teste(this.firstChild.data), mas não queria resolver isso desta forma, pois se forem vários 'lis' , eu vou ter que colocar o evento com a função em cada um deles. Gostaria de fazer por função mesmo, alguém tem alguma idéia de como fazer? O script que estou usando, segui abaixo:

function teste(campo)
{
    alert(campo);
}

<ul >
        <li onclick="teste(this.firstChild.data)" > CAMPO 1</li> 
        <li >CAMPO 2</li> 
        <li >CAMPO 3</li> 
        <li >CAMPO 4</li>
    </ul>

Obrigado a alguma ajuda!

Romerito · Março 10, 2011

i aew rockbilly, você pode fazer da seguinte maneira:

1- crie uma função passando como parametro o objeto que você vai percorrer(UL)

2- com o objeto UL na função, pegue todos os seus filhos li's

3- faça um laço para percorrer todos os li's

4- em cada iteração adicione o evento onclick.

acho que é isso, abraço!

Editado Março 10, 2011 por Romerito

rafaeldorazio · Março 10, 2011

rock, no puro javascript não sei como fazer, mas você já experimentou a bibliote Jquery ?

Ela serve para isso, facilitar no desenvolvimento javascript .

Caso você resolva fazer em jquery posta ai para que agente possa ajuda-lo

rockbilly · Março 11, 2011

Valeu a força Romerito, mas acho que por js não vai.... :huh: :wacko:

Valeu, rafaeldorazio. Eu já estou dando uma olhada nisso! Gostei da dica!

Obrigado a todos!

fiote · Março 11, 2011

rock, no puro javascript não sei como fazer, mas você já experimentou a bibliote Jquery ?
Ela serve para isso, facilitar no desenvolvimento javascript .
Caso você resolva fazer em jquery posta ai para que agente possa ajuda-lo

Essa é a merda de usar biblioteca demais. Você simplesmente não perde tempo aprendendo o core do javascript. Eu to nessa também, mas no meu caso é mootools.

De qualquer jeito amigo, aqui está o que você quer ;)

<script>
window.addEventListener("load",function() {
    
    var listaLi = document.getElementsByTagName('li');
    
    for (i = 0; i < listaLi.length; i++) {
        var myLi = listaLi[i];
        myLi.addEventListener('click',function() {
            var conteudo = this.innerHTML;
            alert(conteudo);
        });
    }
    
});
</script>

<ul>
    <li> CAMPO 1</li> 
    <li>CAMPO 2</li> 
    <li>CAMPO 3</li> 
    <li>CAMPO 4</li>
</ul>

;)

Romerito · Março 11, 2011

bom essa maneira que o fiote postou funciona bem, o problema é que será aplicada em todas as tags LI do documento.

seguindo aqueles passos que falei acima, ficaria mais ou menos assim:

<html>
<head>
    <style type="text/css">
        ul li {
            list-style-type:none;
            width:100px;
            cursor:pointer;
        }
        ul li.branco { background-color:#fff; }
        ul li.cinza { background-color:#ccc; }
        ul li:hover{ background-color:#ADD8E6; }
    </style>
    <script type="text/javascript" language="javascript">

    var d = document;
    window.onload = function(){
        addEventLI(d.getElementsByTagName("ul")[0]);
    }

    function addEventLI(objUL){
        var lis = objUL.getElementsByTagName("li");
        for ( var i = 0; i < lis.length; i++ ){
            lis[i].className = ( i % 2 ) ? "branco" : "cinza";
            lis[i].onmouseover = function(){
                d.getElementById("teste").innerHTML = this.innerHTML;
            }
            lis[i].onmouseout = function(){
                d.getElementById("teste").innerHTML = "";
            }
        }
    }
    </script>
</head>
<body>
    <ul>
        <li>CAMPO 1</li>
        <li>CAMPO 2</li>
        <li>CAMPO 3</li>
        <li>CAMPO 4</li>
    </ul>
    <div id="teste"></div>
</body>
</html>

bom nesse exemplo utilizei o evento onmouseover e onmouseout, espero que com esse exemplo você tenha uma idéia de como fazer a sua parada, abraço!

Editado Março 11, 2011 por Romerito

rockbilly · Março 11, 2011

Romerito, valeu estou olhando o seu script! Fiote, não acontece nada quando clico nos objetos 'lis' do seu script, tem que fazer mais alguma coisa?

Valeu colegas, Abraços!

Editado Março 11, 2011 por rockbilly

Entrar

LOOP em tag li pra saber em qual Clicou!

Pergunta

rockbilly

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

Romerito

Link para o comentário

Compartilhar em outros sites

rafaeldorazio

Link para o comentário

Compartilhar em outros sites

rockbilly

Link para o comentário

Compartilhar em outros sites

fiote

Link para o comentário

Compartilhar em outros sites

Romerito

Link para o comentário

Compartilhar em outros sites

rockbilly

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades