Pegar valor do indice

[Wellington.a.gomes 0]

Boa noite amigos,

estou estudando JS e gostaria de uma ajuda.

 

Estou montando esse script a fim de testes mesmo:

-> tem 8 poltronas.

-> No inicio defino algumas como indisponiveis.

-> As restantes estão disponiveis para escolha do cliente.

 

Só que parei na parte onde eu clico na poltrona que o clientes queira sentar.

Não consigo recuperar o valor dela para poder colocar o cliente.

window.onload = function(){
       todasPoltronas();
   }
   //true = livre
   //false = indisponivel
   var poltronas = [true,false,true,true,true,false,true,false];

   function todasPoltronas(){
       var assento = document.getElementsByTagName('img');
       for(var i=0;i<poltronas.length;i++){
           if(poltronas[i]){
           assento[i].src = "livre.png";    
           }
           else{
               assento[i].src = "indisponivel.png";
           }
           }
   }

   //selecionar poltrona
   function SelecionarPoltrona(valor){
      aqui eu seleciono a poltrona escolhida    
       }


<div id="poltronas"><img onclick="alert(this.valueOf());"/></div>
<div id="poltronas"><img onclick="SelecionarPoltrona(this);"/></div>
<div id="poltronas"><img onclick="SelecionarPoltrona(this);"/></div>
<div id="poltronas"><img onclick="SelecionarPoltrona(this);"/></div>
<div id="poltronas"><img onclick="SelecionarPoltrona(this);"/></div>
<div id="poltronas"><img onclick="SelecionarPoltrona(this);"/></div>
<div id="poltronas"><img onclick="SelecionarPoltrona(this);"/></div>
<div id="poltronas"><img onclick="SelecionarPoltrona(this);"/></div>

 

Se alguem puder me ajudar.

Sei que é bem simples mas sinceramente ja tentei de tudo.

[leandro_moh 0]

Tonzinhu, não entendi oque você quer fazer...

 

Tenta ser mais expecifico no problema e no que você quer que o script faça para podermos te ajudar melhor.

 

att.

leandro moh

[Henrique Barcelos 290]

Vamos alterar um pouco isso aí.

Primeiramente, você não pode colocar o mesmo ID para mais de um elemento.

ID é um identificador ÚNICO na página. Troque id por class.

 

Ao invés de utilizar uma DIV, vamos utilizar uma âncora (<a>), pois é mais semântico. <a> é um elemento "naturalmente clicável".

Pra identificar a poltrona, utilizamos o atributo id, que é único para cada poltrona.

O atributo rel serve para indicar se a poltrona está livre ou ocupada. Inicialmente, temos todas livres.

<a href="#" class="poltrona" rel="poltrona-0"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="poltrona-1"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="poltrona-2"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="poltrona-3"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="poltrona-4"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="poltrona-5"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="poltrona-6"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="poltrona-7"><img src="livre.png" alt=""/></a>

 

Agora vem o Javascript:

window.onload = function(){
var poltronas = [true,false,true,true,true,false,true,false];
inicializarPoltronas(poltronas);
}

function inicializarPoltronas(poltronas){
var ancoras = document.getElementsByTagName('a');
for(var i = 0; i < ancoras.length; i++){
   	if(ancoras[i].className == 'poltrona'){
       	setarEstadoPoltrona(ancoras[i], poltronas[i]);
       	ancoras[i].onclick = function(e){
       		e.preventDefault();
           	alternarEstadoPoltrona(this);
       	}
   	}
}
}

function setarEstadoPoltrona(poltrona, estado) {
if(estado === false){
   	poltrona.setAttribute('rel', 'ocupada');
   	var img = poltrona.getElementsByTagName('img')[0];
   	alterarImagem(img, 'indisponivel.png');
} else {
   	poltrona.setAttribute('rel', 'livre');
   	var img = poltrona.getElementsByTagName('img')[0];
   	alterarImagem(img, 'livre.png');
}
}

function alternarEstadoPoltrona(poltrona){
var estadoAtual = poltrona.getAttribute('rel');
novoEstado = estadoAtual == 'livre' ? false : true;
setarEstadoPoltrona(poltrona, novoEstado);
}

function alterarImagem(img, novoSrc){
img.setAttribute('src', novoSrc);
}

[Wellington.a.gomes 0]

Estava me perguntando se teria como fazer isso sem setar um id para cada poltrona.

Com o id eu havia conseguido.

Vou dar uma estudada nesse seu script amigo para ver se há diferença entre o seu e o meu.

Só não entendi o porque do uso do rel="" nos links. Poderia me explicar por favor?

 

Agradeço a ajuda de todos.

[Henrique Barcelos 290]

Ops, foi falha minha... Eu ia utilizar o atributo id, depois mudei para rel e na verdade nem utilizei nenhum dos dois para identificar as poltronas.

 

Na verdade eu utilizei isso apenas para verificar se a poltrona estava livre ou ocupada, o correto é assim:

<a href="#" class="poltrona" rel="livre"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="livre"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="livre"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="livre"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="livre"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="livre"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="livre"><img src="livre.png" alt=""/></a>
<a href="#" class="poltrona" rel="livre"><img src="livre.png" alt=""/></a>

[Wellington.a.gomes 0]

Entendi.

Veja o meu script, está funcionando, só falta validar as poltrocas que estão indisponiveis. Pois quando clica nelas da pra colocar um cliente também, mas isso é só validar também.

window.onload = function(){
       todasPoltronas();
   }
   //true = livre
   //false = indisponivel
   var poltronas = [true,false,true,true,true,false,true,false];

   function todasPoltronas(){
       var assento = document.getElementsByTagName('img');
       for(var i=0;i<poltronas.length;i++){
           if(poltronas[i]){
           assento[i].src = "imagens/livre.png";    
           }
           else{
               assento[i].src = "imagens/indisponivel.png";
           }
           }
   }

   //selecionar poltrona
   function SelecionarPoltrona(valor){
   var poltrona = valor.id;
   if(valor.src == "file:///C:/Users/Wellington/Desktop/cinema/imagens/uso.png"){
       if(confirm("Deseja encerrar a sessão?")){
           valor.src = "imagens/livre.png"; 
       }
       else{
           return false;
       }
   }
   else{
   if(confirm("Deseja escolher essa poltrona?")){
   valor.src = "imagens/uso.png";    
   }    
   return false;
 }
 }

Não repara nessa parte aqui abaixo,pois quando eu tento resgatar o valor de src ele traz o caminhos completo da imagem. E vendo o metodo que você usou com rel da pra validar por lá também, fica mais limpo o codigo.

 

file:///C:/Users/Wellington/Desktop/cinema/imagens/uso.png

Veja se tem como alterar alguma coisa no meu ai, pra ficar melhor, mais limpo e profissional digamos.

 

vlw pela força.