Trocar uma tag de imagem sem atualizar a página

MarioSkynex · Setembro 22, 2014

Olá pessoal tudo bom ?

Estou com um problema que é o seguinte.

Preciso alternar entre duas imagens usando Jquery após o usuário clicar em uma.

Segue o código:

Esse é o código da verificação:

			if(resposta == "curtiu")
            {
                // Incrementa mais um aos votos
                votos.html(parseInt(votos.html()) + 1);
				bom.html('<img src="img/unlike.png" alt="ruim"/>');
                // Mensagem de sucesso
                status.html("Você curtiu com sucesso!");
            }
			if(resposta == "descurtiu")
            {
                // Incrementa mais um aos votos
                votos.html(parseInt(votos.html()) - 1);
                // Mensagem de sucesso
                status.html("Você descurtiu com sucesso!");
            }

Essas são as tags:

Preciso conseguir mudar no meu código quando o usuário clicar na "<img src="img/like.png" alt="bom"/>" Ela executa o "if(resposta == "curtiu") " e ela toda teria que trocar para a <img src="img/unlike.png" alt="ruim"/>. Eu já tentei com load e alguns outros métodos mas sem sucesso até agora =/. Alguém tem algum método ??

William Bruno · Setembro 22, 2014

Extraia para uma função esse comportamento.

Como é o restante do seu código ?

De onde vem essas variáveis ?

MarioSkynex · Setembro 22, 2014

Esse é o Código javascript inteiro

$(function($) {
    // Quando clicando em uma imagem da div que tem CLASS = frase
    $("div.frase img").click(function() {
        // Recupera o MSG_INT_ID da frase que está na propriedade LANG da DIV-PAI da imagem e que tem CLASS = frase
        var MSG_INT_ID = $(this).parent("div.frase").attr("lang");
        // Recupera o tipo (bom|ruim) que está na propriedade ALT da imagem clicada
        var tipo = $(this).attr("alt");
        // Seleciona o SPAN onde estão os votos**
        var votos =  $("div[lang="+MSG_INT_ID+"] span.geral span.valor");
        // Seleciona a DIV onde serão colocadas as mensagens**
        var status = $("div[lang="+MSG_INT_ID+"] div.status");
		var bom = $("div[lang="+MSG_INT_ID+"] div.bom");
        
        // Mensagem de carregando
        status.html("<img src='imagens/loader.gif' alt='Carregando...' />");
        
        // Faz a requisição AJAX
        $.post("ajax/votar.php", {MSG_INT_ID: MSG_INT_ID, tipo: tipo}, function(resposta) {
            // Se houver uma mensagem na resposta, exibe a mensagem
            if (resposta) 
            {
                status.html(resposta);
            } 
			if(resposta == "curtiu")
            {
                // Incrementa mais um aos votos
                votos.html(parseInt(votos.html()) + 1);
                // Mensagem de sucesso
                status.html("Você curtiu com sucesso!");
            }
			if(resposta == "descurtiu")
            {
                // Incrementa mais um aos votos
                votos.html(parseInt(votos.html()) - 1);
                // Mensagem de sucesso
                status.html("Você descurtiu com sucesso!");
            }
        });

    }); 
});

Esse é o código php:

    <?php 
	session_start();
	include_once("includes/mysqli_connect.php");
	$dbc = conexao();
	require_once('includes/seguranca.php');
	$conta = verificar();
	include "includes/teste.php"; 
	?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Bethink</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/funcoes.js"></script>
        <link href="css/mobile.css" rel="stylesheet" media="screen and (max-width: 540px)" charset="utf-8"/>
        <link href="css/tablet.css" rel="stylesheet" media="screen and (min-width: 541px) and (max-width: 768px)" charset="utf-8"/>
        <link href="css/style.css" rel="stylesheet" media="screen and (min-width: 769px)" charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
	<body>
	<h1>Bem vindo</h1>
    <?php 
			echo "Nome: ".$conta['USU_STR_NOME']."<br>";
			echo "ID: ".$_SESSION['id_usuario'];
			echo "<br>";		
	?>
    <br />
	<?php
	$idusuario = $_SESSION['id_usuario'];
    // Selecionando todas as postagens de fotografia
    $query = mysqli_query($dbc,"SELECT * FROM mensagens WHERE CAT_INT_ID = 2 ORDER BY MSG_INT_ID DESC");
    // Passando frase por frase	
	
	    while ($frase = mysqli_fetch_object($query)):
    ?>
    
    <div class="frase" lang="<?php echo $frase->MSG_INT_ID; ?>">
    
        <div class="texto"><?php echo $frase->MSG_STR_ASSUNTO; ?></div>
        
		<img src="img/like.png" alt="bom"/>
        <img src="img/unlike.png" alt="ruim"/>
        
        <span class="geral">
            (<span class="valor"><?php echo $frase->MSG_INT_CURTIDA; ?></span>)
        </span>
        
        <div class="status"></div>
        
    </div>

    <?php endwhile; ?>
    </body>
</html>

E esse é o código que faz a atualização para mostrar se curtiu ou não e fazer a inserção no banco de dados:

<?php
session_start();
// Incluindo arquivo de conexão
include_once("../includes/mysqli_connect.php");
$dbc = conexao();
// Recuperando valores
$id = (int) $_POST["MSG_INT_ID"];
$tipo = addslashes($_POST["tipo"]);
$id_usuario = (int)$_SESSION['id_usuario'];

/*	FUNÇÃO	*/

	function verificar_clicado($id, $id_usuario){
		$dbc = conexao();
		$id = (int)$id;
		$id_usuario = (int)$id_usuario;
		$verificar = mysqli_query($dbc,"SELECT CUR_INT_ID FROM `curtidas` WHERE USU_INT_ID = '$id_usuario' AND MSG_INT_ID = '$id'");
		return (mysqli_num_rows($verificar) >= 1) ? true : false;
	}

/*	FUNÇÃO	*/	
	
// SE O TIPO FOR BOM
if ($tipo == "bom")
{
	// Verificar se o usuário já clicou
	if(!verificar_clicado($id, $id_usuario))
	{
		// Incrementa o voto da frase
		$query = mysqli_query($dbc,"UPDATE mensagens SET MSG_INT_CURTIDA = MSG_INT_CURTIDA+1 WHERE MSG_INT_ID = ".$id."");
		// Se for um sucesso a query
		if ($query) 
		{
			// Insere o Like na tabela de curtidas
			$inserir_like = mysqli_query($dbc,"INSERT INTO `curtidas` (USU_INT_ID, MSG_INT_ID) VALUES ('$id_usuario','$id')");
			// Retorna false, ou seja, sucesso
			echo "curtiu";
		}
		// Se houver erro na query 
		else 
		{
			echo "Problemas no servidor.";
		}
	}
	// Se já tiver curtido
	else
	{
		echo "Você já votou nessa frase 1.".$tipo;
	}
}

// SE O TIPO FOR RUIM
if ($tipo == "ruim")
{
	// Verificar se o usuário já clicou
	if(verificar_clicado($id, $id_usuario))
	{
		// Tira o voto da frase
		$delete = mysqli_query($dbc,"DELETE FROM `curtidas` WHERE USU_INT_ID = '$id_usuario'  AND MSG_INT_ID = '$id'");
		// Se for um sucesso a query
		if ($delete) 
		{
			// Insere o Like na tabela de curtidas
			$update = mysqli_query($dbc,"UPDATE `mensagens` SET MSG_INT_CURTIDA = MSG_INT_CURTIDA-1 WHERE MSG_INT_ID = '$id'");
			// Retorna false, ou seja, sucesso
			echo "descurtiu";
		}
		// Se houver erro na query 
		else 
		{
			echo "Problemas no servidor.";
		}
	}
	// Se tiver descurtido
	else
	{
		echo "Você precisa curtir para poder descurtir.".$tipo;
	}
}


?>

No caso eu só preciso conseguir alternar com javascript entre as tags de imagem de Like e Unlike alterando além da imagem o alt.

MarioSkynex · Setembro 22, 2014

Moderador desculpa o post com o código todo, achei o problema específico

Tudo está funcionando porém, preciso fazer uma troca de imagens com o Jquery e não sei executar este comando. (Segue trechos do código).

JAVASCRIPT



if(resposta == "curtiu")

            {

                // Incrementa mais um aos votos

                votos.html(parseInt(votos.html()) + 1);

likes.attr( "alt", "ruim" );

likes.attr( "src", "img/unlike.png" );

                // Mensagem de sucesso

                status.html("Você curtiu com sucesso!");

            }

if(resposta == "descurtiu")

            {

                // Incrementa mais um aos votos

                votos.html(parseInt(votos.html()) - 1);

likes.attr( "alt", "bom" );

likes.attr( "src", "img/like.png" );

                // Mensagem de sucesso

                status.html("Você descurtiu com sucesso!");

            }

PHP



    <div class="frase" lang="<?php echo $frase->MSG_INT_ID; ?>">


        <div class="texto"><?php echo $frase->MSG_STR_ASSUNTO; ?></div>

        <?php if($usr_liked == 0){?>     

<img id="likes" src="img/like.png" alt="bom"/>

        <?php } else {?>

        <img id="likes" src="img/unlike.png" alt="ruim"/>

        <?php }?>

        <span class="geral">

            (<span class="valor"><?php echo $frase->MSG_INT_CURTIDA; ?></span>)

        </span>


        <div class="status"></div>


    </div>

A variavel likes no javascript está da seguinte forma:

//Imagem de Like

var likes = $("div[lang=+MSG_INT_ID+] #likes");

Mas acho que tem algum erro na hora de especificar o caminho do #likes do qual eu não sei qual é, pois a função IF Curtiu ou não só faz o processo de atribuir o alt e a src a um dos posts do meu site.

Saberia me dizer o que posso fazer ?

William Bruno · Setembro 22, 2014

Vc não pode duplicar IDs.

Faça o seguinte:

var likes = $("div[lang="+MSG_INT_ID+"] .likes");

MarioSkynex · Setembro 22, 2014

ERA ISSO MESMO MANO AMÉEM ASUHASHUAUSH' eu tinha testado antes e havia funcionado só agora vi o post asuhsauh', mas agora entendi o porque muito obrigado de verdade !!!!!

Entrar

Arquivado

Trocar uma tag de imagem sem atualizar a página

Recommended Posts

MarioSkynex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

MarioSkynex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

MarioSkynex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

MarioSkynex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

select com varias categorias por horario

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante