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?

Recommended Posts

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

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

×

Informação importante

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