2

Estou tentando adicionar um eventListener, do tipo click, nas minhas divs através de suas classes, que se chamam: option-title. Entretanto como é mais de um título, gostaria que recuperasse exatamente aquele que estou clicando.

Segue o código:

var groupOptions = document.getElementsByClassName("option-title");
    for(var i = 0; i < groupOptions.length; i++){
        groupOptions[i].addEventListener("click", message(i));
    }
    function message(i){
        if(i == 1){
            alert("Clicado 1!");
        }
        else if(i == 2 ){
            alert ("Clicado 2");
        }else if(i == 3){
          alert("Clicado 3");
        }else if(i == 4){
          alert("Clicado 4");
        }
    }
<div class="box-option option-title">
   <span>Title 1</span>
</div>
<div class="box-option option-title">
   <span>Title 2</span>
</div>
<div class="box-option option-title">
   <span>Title 3</span>
</div>
<div class="box-option option-title">
   <span>Title 4</span>
</div>

O que eu gostaria que acontecesse é que eu clicando, por exemplo, na terceira div, ele me ternasse seu índice (2). Outra duvida também é se eu posso passar algum parâmetro quando estou adicionando o EventListener, pois tentei passar o índice. Grato.

3 Respostas 3

1

Estavas quase lá. Só falta criares um escopo novo para esse i ser memorizado.

Podes usar assim:

function message(i) {
    return function () {
        if (i == 0) {
            alert("Clicado 1!");
        } else if (i == 1) {
            alert("Clicado 2");
        } else if (i == 2) {
            alert("Clicado 3");
        } else if (i == 3) {
            alert("Clicado 4");
        }
    }
}

Desta maneira quando usas .addEventListener("click", message(i)); o código chama de facto a função e passa-lhe o i. Essa função por sua vez retorna outra que vai ser usada então como callback quando click acontecer, mas já com o i correspondente em memória.

Repara que os íncices, e o teu ciclo for começa em 0, por isso mudei os if do teu código também.

jsFiddle: http://jsfiddle.net/h3sdcr3v/

4
  • Interessante é que o DoteVoteMeDown disse que fazer isto não é correto. Por outro lado, me ajudou a fazer exatamente o que precisava. Commented 22/09/2015 às 18:28
  • @WesleyRedfield há maneiras diferentes de fazer. Ele se calhar tinha outra em mente, talvez como fiz aqui: pt.stackoverflow.com/a/23788/129 repara no exemplo 3.
    – Sergio
    Commented 22/09/2015 às 19:08
  • 1
    @WesleyRedfield eu me expressei errado dizendo que não estava correta, mas em seguida eu disse exatamente o que o Sergio fez, que dessa forma estaria registrando o retorno da função. O que o Sergio fez ficou legal, passando outra função como retorno. É que eu particularmente não tenho costume de fazer assim, mas funciona muito bem também. Commented 22/09/2015 às 21:17
  • @DontVoteMeDown mas foi de grande ajuda saber sobre os "data-indice". É que no que procurava a solução do Sergio foi mais tranquila de colocar. Grato Commented 24/09/2015 às 21:22
1

A forma que você está registrando o evento não está correta. Você não pode passar uma função executando ela: message(i). Os parênteses executam ela e o que estaria sendo registrado seria o retorno dela. Para passar uma função como parâmetro você tem que passar só o nome dela, no caso message apenas. O que importa é que dentro do evento você sempre terá o this, que é o seu elemento.

Então você usar um atributo data para isso se você tive controle do html gerado, exemplo:

<div class="box-option option-title" data-indice="1">
   <span>Title 1</span>
</div>

Lendo o atributo:

function message(){
    alert(this.dataset.indice);
}

Fiddle

Caso você não queira ou não possa mexer no html - e até ficou mais simples - você pode setar o atributo no próprio script:

for(var i = 0; i < groupOptions.length; i++){
    groupOptions[i].dataset.indice = (i + 1);
    groupOptions[i].addEventListener("click", message);
}

Fiddle

1

Já tentou isso?

   var groupOptions = document.getElementsByClassName("option-title");

for(var i = 0; i < groupOptions.length; i++){
groupOptions[i].addEventListener("click", message);
}

function message(e){ 
console.log(this);
}
<div class="box-option option-title">
   <span>Title 1</span>
</div>
<div class="box-option option-title">
   <span>Title 2</span>
</div>
<div class="box-option option-title">
   <span>Title 3</span>
</div>
<div class="box-option option-title">
   <span>Title 4</span>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .