trocar imagem ao clicar

Francisco Leal · Janeiro 2, 2011

Seguinte, se alguém puder me ajudar, não manjo muito de jquery cheguei nesse código lendo umas coisas la no site oficial, mas ai me deparei com o seguinte ao clicar ele muda a image, que no caso esse é o meu objetivo, mas só que eu quero que ele mude apenas a que eu clicar, ai nesse código se eu clicar na primeia ele automaticamente muda todas tmb é ai que mora a minha dúvida como mudar isso? sei que posso repetir os códigos mudando alguma coisa colocando id na tag, mas ai ficaria enorme o código, gostaria de saber se tem alguma forma mais enxuta de se fazer isso, agradeço desde ja.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <link rel="stylesheet" href="css/classes.css" type="text/css">
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
       <title></title>
   </head>
   <body>
       <script type="text/javascript">
           $(document).ready(function(){
           $("img").click(function(){
               $("img").attr('src', 'images/presenca.png');  
           });
           });

       </script>
       <img src="images/falta.png"/>
       <img src="images/falta.png"/>
       <img src="images/falta.png"/>
       <img src="images/falta.png"/>
       <img src="images/falta.png"/>
       <img src="images/falta.png"/>
       <img src="images/falta.png"/>
       <img src="images/falta.png"/>

   </body>
</html>

Ta consegui fazer assim mas tipo seu precisar de uns 30 vai fica gigante meu código. tem como simplificar isso?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <link rel="stylesheet" href="css/classes.css" type="text/css">
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
       <title></title>
   </head>
   <body>
       <script type="text/javascript">
           $(document).ready(function(){
           $("#1").bind("click", function(){
               $("#1").attr('src', 'images/presenca.png');
           });
           $("#1").bind("dblclick", function(){
               $("#1").attr('src', 'images/falta.png');
           });

           $("#2").bind("click", function(){
               $("#2").attr('src', 'images/presenca.png');
           });
           $("#2").bind("dblclick", function(){
               $("#2").attr('src', 'images/falta.png');
           });

           $("#3").bind("click", function(){
               $("#3").attr('src', 'images/presenca.png');
           });
           $("#3").bind("dblclick", function(){
               $("#3").attr('src', 'images/falta.png');
           });
           });


               // $("#2").attr('src', 'images/presenca.png');
                 //$("#3").attr('src', 'images/presenca.png');
                 // $("#4").attr('src', 'images/presenca.png');
                 //  $("#5").attr('src', 'images/presenca.png');
                  //  $("#6").attr('src', 'images/presenca.png');
                    // $("#7").attr('src', 'images/presenca.png');
                      //$("#8").attr('src', 'images/presenca.png');



       </script>
       <img id="1" src="images/falta.png"/><br><br>
       <img id="2" src="images/falta.png"/><br><br>
       <img id="3" src="images/falta.png"/><br><br>
       <!--<img id="4" src="images/falta.png"/><br><br>
       <img id="5" src="images/falta.png"/><br><br>
       <img id="6" src="images/falta.png"/><br><br>
       <img id="7" src="images/falta.png"/><br><br>
       <img id="8" src="images/falta.png"/><br><br>-->

   </body>
</html>

Eliseu M. · Janeiro 2, 2011

É só usar o $(this):

<script type="text/javascript">
$(document).ready(function(){
$("img").click(function(){
	$(this).attr('src', 'images/presenca.png');
});
});
</script>

// Continuando...

Para fazer com tantas imagens é simples, apenas atribua outro evento .dblclick() e mude para a imagem falta.png:

<script type="text/javascript">
$(document).ready(function(){
$("img").click(function(){
	$(this).attr('src', 'images/presenca.png');
});
$("img").dblclick(function() {
	$(this).attr('src', 'images/falta.png');
});
});</script>

Francisco Leal · Janeiro 2, 2011

vou testar aguenta ae, não suma plis!

funcionou perfeitamente, podia me explicar qual a ideia desse $this caraca simplificou no máximo o código apenas uma palavra, fico no aguardo..

só mais uma dúvida tem como com o jquery ao fazer essa troca com o click e o dblclick , ao terminar de clicar ele salvar no bd a alteração, tipo o que to tentando fazer é uma lista de presença, então tipo ao clicar pra mudar a imagem pra presente salvasse isso no banco, tem como? tem algum evento do jquery se tiver me fale ae vo la no site oficial ler sobre.. desde ja obrigado pela ajuda Eliseu

Eliseu M. · Janeiro 2, 2011

A parada do $(this) é o seguinte: ele pega o elemento ao qual foi atribuído o evento.

Claro, você pode usar a função $.post, que chama uma página PHP (a qual faria o UPDATE no banco) via AJAX, ou seja, sem recarregar a página. Mas o problema é o seguinte: o ID da imagem é o ID da pessoa? Porque precisamos passar no $.post algum parâmetro para o PHP receber e saber qual pessoa ele vai dar UPDATE. Exemplo:

<script type="text/javascript">
$(document).ready(function(){
       $("img").click(function(){
               $(this).attr('src', 'images/presenca.png');
			var id = $(this).attr('id');
			$.post('update_presenca.php', { presenca: true, id: id });
       });
       $("img").dblclick(function() {
               $(this).attr('src', 'images/falta.png');
			var id = $(this).attr('id');
			$.post('update_presenca.php', { presenca: false, id: id });
       });
});
</script>

E na página que você chamará (update_presenca.php):

<?php

include('conexao.php'); // arquivo que faz a conexão com o MySQL

$presenca = $_POST['presenca'];
$id = $_POST['id']; // perceba que essas variáveis são as mesmas passadas na função $.post()
mysql_query("UPDATE tabela SET presenca = '$presenca' WHERE id = '$id'");

?>

Francisco Leal · Janeiro 2, 2011

vou testar isso pra eu ver Eliseu M. vlw cara pela ajuda.

Eliseu fiz assim, só num sei se vai dar certo, num deu erro, agora vo atras do tal ajax que você falou, creio que só falta isso..

index.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <link rel="stylesheet" href="css/classes.css" type="text/css">
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
       <title></title>
   </head>
   <body>
<script type="text/javascript">
           $(document).ready(function(){
               $("img").click(function(){
                   $(this).attr('src', 'images/presenca.png');
                   var id = $(this).attr('id');
                   $.post('update_presenca.php', { presenca: true, id: id });
               });
               $("img").dblclick(function() {
                   $(this).attr('src', 'images/falta.png');
                   var id = $(this).attr('id'); //cria uma variavel id com a id da tag html no cado da img
                   $.post('update_presenca.php', { presenca: false, id: id });
               });});
   </script>
       <?php
           include('bd/conexao.php');
           // PEGA OS DADOS DO USUÁRIO e mostra na area restrita
           $sql = mysql_query("SELECT * FROM presenca");
           while ($result = mysql_fetch_array($sql)){
           $nome = $result['nome'];
           $matricula = $result['matricula'];// aqui no caso tratei como matricula e não como id
       ?>
       <p><?php echo $nome; ?>    <img alt="" id="<?php $matricula ?>" src="images/falta.png"/></p><br><br>

       <?php
           }
       ?>
</body>
</html>

update_presenca.php


<?php
include('bd/conexao.php'); // arquivo que faz a conexão com o MySQL

$presenca = $_POST['presenca'];

$id = $_POST['id']; // perceba que essas variáveis são as mesmas passadas na função $.post()
mysql_query("UPDATE presenca SET presenca = '$presenca' WHERE matricula = '$id'");
?>

esse é o bd que montei


Estrutura da tabela `presenca`
--

CREATE TABLE IF NOT EXISTS `presenca` (
 `id` int(4) NOT NULL,
 `nome` varchar(30) NOT NULL,
 `matricula` int(6) NOT NULL,
 `presenca` varchar(10) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Extraindo dados da tabela `presenca`
--

INSERT INTO `presenca` (`id`, `nome`, `matricula`, `presenca`) VALUES
(1, 'Adelino de Carvalho Lino', 1234, 'false'),
(2, 'Adelmo Carneiro Leão', 4321, 'false'),
(3, 'Ademir Lucas Gomes', 4567, 'false'),
(4, 'Adolfo de Oliveira Portela', 7654, 'false');

estou olhando o código esse $.post ja é ajax? e no caso de presenca: true e id: id você esta atribuindo esses valores a essas variaveis que no caso é presenca e id , correto? se for isso beleza eu entendi, agora acho que falta alguma coisa para que o index com o update_presenca se enxerguem, pois acho que não se veem, meu bd ta normal.. e no caso desse valor true e false seria string ou não?

essa presenca foi declarada onde?

não deu muito certo não acredito que seja na passagem das variaveis, mas como num entendo de jquery, vo tentando aqui

Entrar

Arquivado

trocar imagem ao clicar

Recommended Posts

Francisco Leal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eliseu M. 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Francisco Leal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eliseu M. 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Francisco Leal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante