Ir para conteúdo

POWERED BY:

Arquivado

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

Patricia Alves

toggle jquery Oque fiz de errado?

Por , em Javascript

Recommended Posts

Patricia Alves    0

Patricia Alves
Postado

Saudações galera!

Não tenho experiencia ainda, e gostaria de pedir a ajuda de vcs. O problema é simples

tenho 2 botoes em uma pagina qdo o usuario clica em um deles aparece uma mensagem automatica, até ai tudo bem,.Agora no outro botão ao clicar aparece uma imagem que está dentro de uma div, e ao clicar novamente no mesmo botão a imagem some.

estou tentando usar o Toggle do jquery. Segue o codigo que montei provavelmente com algumas cagadas... :upset:

<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>JavaScript</title>
<script type="text/javascript" src="../jquery-1.2.2.pack.js"></script>
<script type="text/javascript">
jQuery.fn.toggleText = function(a,B) {
return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
 
$(document).ready(function(){
$('#video_game').css('display', 'none');
$('#disturb').click(function() {
$(this).next().slideToggle('slow')
.siblings('#video_game:visible').slideToggle('fast');
 
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('#video_game:visible').prev()
.toggleText();
});
 $('#clica').click(function(){
                 alert("Está indo bem!!!");    
  });
});
 
 
</script>
</head>
 
<style>
body {
width: 900px;
margin: 0 auto;
background-color: black;
}
 
#conteudo {
width: 800px;
}
 
#botoes{
padding: 20px 0px;
}
</style>
 
 
</head>
<body>
<div id="conteudo" align="center">
<div id="botoes">
<button id="clica">CLICK HERE</button>
<button id="disturb">DO NOT DISTURB</button>
</div>
 
<div id="video_game" align="center" >
<img src="image/video_game.jpg">
</div>
</div>
</body>
 
 
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Patricia Alves    0

Patricia Alves
Postado

OLÁ

 

este é o código do botão que não funciona

 



jQuery.fn.toggleText = function(a,b) {


return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));


}


 


$(document).ready(function(){


$('#video_game').css('display', 'none');


$('#disturb').click(function() {


$(this).next().slideToggle('slow')


.siblings('#video_game:visible').slideToggle('fast');


 


$(this).toggleText('Revelar','Esconder')


.siblings('span').next('#video_game:visible').prev()


.toggleText();


});


 


e aqui onde criei o botão no html, onde o ID que quero acessar é "disturb"


 




<div id="conteudo" align="center">


<div id="botoes">


<button id="clica">CLICK HERE</button>


<button id="disturb">DO NOT DISTURB</button>


</div>





 o botão que quero que exiba e esconda a div "video_game"é esse:<button id="disturb">DO NOT DISTURB</button> </div>   este é o conteudo q quero exibir e esconder<div id="video_game" align="center" >        <img src="image/video_game.jpg">



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

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

			

			

				  Aceito