Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

felipe-santiago

modificar página de acordo com ação da página anterior

Recommended Posts

Olá a todos, peço ajuda para a seguinte dúvida...

 

tenho uma página em HTML com três opções: A, B e C

se uma pessoa clicar em qualquer opção ela será direcionada para a mesma página, a qual contém uma bola colorida,

porém, se ela clicar na opção A, a bola será amarela, se clicar na B, a bola será branca e se clicar na C, a bola será cinza

 

como posso fazer isso com javascript ? entendo muito pouco e não sei como faço...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Manda uma opção pela URL, ai você faz uma validação e exibe a imagem conforme o tipo.

 

Por exemplo:

index.php?tipo=A

 

 

 

 
 
if(tipo == 'A'){
$("#imagem").addClass('amarelo');
}
 
 
if(tipo == 'B'){
$("#imagem").addClass('branco');
}
 
if(tipo == 'C'){
$("#imagem").addClass('cinza');
}
 
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

i aew cara, a solução dos caras foram ótimas, mas como não sei qual a idéia principal vou tentar dar outra solução, se a idéia é apenas modificar a cor da bola você pode fazer da seguinte maneira com HTML5:

function drawCircle(color){
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		context.fillRect(0, 0, 200, 200);
		context.arc(100, 100, 70, 0, Math.PI * 2, false);
		context.strokeStyle = color;
		context.fillStyle = color;
		context.stroke();
		context.fill();
		context.fillStyle = "#000";
	}

	window.onload = function(){
		var radios = document.getElementsByClassName('drawCircleCanvas');
		
		for (i in radios){
			radios[i].onclick = function(){
				drawCircle(this.value);
			}
		}
	}

 

 <input type="radio" name="color[]" value="#FFFF00" class="drawCircleCanvas"/> A <br /> <input type="radio" name="color[]" value="#ffffff" class="drawCircleCanvas"/> B <br /><input type="radio" name="color[]" value="#696969" class="drawCircleCanvas"/> C <br /><canvas id="canvas" width="200" height="200"></canvas>

Testei apenas no Chrome Versão 23.0.1271.95, espero que ajude, abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acredito que um simples IF como já foi postado pelo colega acima resolva, via parâmetro GET, mas caso seja algo criado dinamicamente, a segunda sugestão se sairá melhor...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito obrigado pelas respostas!

 

Como a resposta do Bruce me pareceu mais simples, vou tentar seguir por ela...

O negócio de mudar a cor da bola foi só um exemplo, eu quero fazer essa função que falei, mas não exatamente mudar cor de bola nenhuma. Vou tentar explicar o que realmente quero com mais detalhes...

 

Primeiro estou na página1.html, a qual tem as opções 1, 2 ou 3:

 

sbdq.jpg

As 3 opções são links que levam para a página2.html, a qual possui um jCarousel com as 3 opções e logo abaixo um box com o conteúdo referente a cada opção que é exibido na forma de AJAX:

5qm3.jpg

Isso tudo já está feito. Mas, na imagem acima, a opção 1 está amarela, como se ela estivesse "ativa". Ou seja, na página1 a pessoa escolheu a opção 1 e foi direcionada para a página2 a qual mostra esta opção 1 como ativa (amarela). Isso parece ser muito simples, mas eu não sei fazer sahuhausuhas e como disse, entendo pouco de javascript e quase nada de PHP. Acho que entendi o que o Bruce disse, mas não sei pôr em prática, se puder ser um pouco mais detalhado eu agradeço...

 

obrigados a todos, abraços

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você chegou à fazer algo amigo ?

então cara, tá tudo feito. Só falta mesmo um código pra fazer a opção que a pessoa escolher na página1 aparecer já "ativa" na página2. Não entendo de PHP, mas acredito que o que vc falou resolve... como eu faço pra conversar mais direto ctg ? vlw, abraço

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.