Arquivo Discussoes de Programacao e Tecnologia Ola,
Estou iniciando em JQuery e fiz utilizaçao da funçao click.
Quando clico nas divs informadas, me aparece uma mensagem: A div foi clicada.
$(function(){
$("#div01,#div02").click(function(){
alert("A div foi clicada.")
});
});
Gostaria de saber se é possivel fazer a mesma coisa mas mostrar a mensagem (alert) depois de clicar em duas ou três divs.
Eu clico na div01, depois na div02 e somente depois de clicar nas duas a mensagem é informada.
É possivel???
OBRIGADA.
Sim. Você precisa guardar a informação de que a div foi clicada. Se são só 2 divs, você pode ter duas variáveis pra armazenar esta informação. Um exemplo simples:
var div01Clicked,
div02Clicked,
showMessage = function() {
if (div01Clicked && div02Clicked) {
alert("divs clicadas");
div01Clicked = div02Clicked = false;
}
};
$("#div01").click(function() {
div01Clicked = true;
showMessage();
});
$("#div02").click(function() {
div02Clicked = true;
showMessage();
});
Veja que eu criei uma função que verifica se as div foram clicadas. Se as duas foram, a função exibe a mensagem e reseta as variáveis. Neste caso, na próxima vez a pessoa tem que clicar nas duas divs novamente para ver as mensagens. Se você terá muitas divs, sugiro a criação de um objeto ou array que armazena estas informações, para não ficar criando um monte de variáveis (uma para cada div).
Muito obrigada,
entendi bem o codigo e tenho que guardar os valores para compara-los depois e mostrar a mensagem.
Tentei usar seu codigo, mas ao clicar nas duas divs, nao me mostra a mensagem =s
Tenho que adinar algo à funçao?
Ja infomei acima o uso e jquery e informei bem o nome das divs: div01 e div02
Obrigada,
Tentou debugar o código? Ver se ele entra dentro das funções de clique.
Qualquer coisa cola como você fez pra eu ver. (=
ola obrigada pela ajuda:
Ai vai o codigo:
<!DOCTYPE HTML>
<html >
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<title> Teste</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
var div01Clicked,
div02Clicked,
showMessage = function() {
if (div01Clicked && div02Clicked) {
alert("divs clicadas");
div01Clicked = div02Clicked = false;
}
};
$("#prod01").click(function() {
div01Clicked = true;
showMessage();
});
$("#prod02").click(function() {
div02Clicked = true;
showMessage();
});
</script>
</head>
<body>
<div id="prod01" class="post-entretenimento" data-value="1">
<a href="#"><img src="images/r01.jpg" rel="" title=""/></a>
<h1><a href="#">Produit 01</a></h1>
</div> <!-- fim post-entretenimento-->
<div id="prod02" class="post-entretenimento">
<a href="#"><img src="images/c01.jpg" rel="" title=""/></a>
<h1><a href="#">Produit 02</a></h1>
</div> <!-- fim post-entretenimento-->
</body>
</html>
Brigadao!!!
Você precisa prestar atenção para o carregamento da página. Você só deve buscar os elementos html, depois que eles foram carregados. No seu caso, ele processa a página, executa os scripts, mas as divs ainda não foram carregadas. Para garantir que a página está carregada você usa o evento onload do browser, ou, no caso do jquery, pode usar a função ready que é ainda melhor:
$(document).ready(function() {
var div01Clicked,
div02Clicked,
showMessage = function() {
if (div01Clicked && div02Clicked) {
alert("divs clicadas");
div01Clicked = div02Clicked = false;
}
};
$("#prod01").click(function() {
console.log('produ01 click');
div01Clicked = true;
showMessage();
});
$("#prod02").click(function() {
console.log('produ02 click');
div02Clicked = true;
showMessage();
});
});
Isto garante que o html já foi carregado. No seu primeiro exemplo, você não usou o ready, usou somente:
$(function() {
//...
});
O que também funciona.
Agora deu super certo.
Muito obrigada mesmo pela ajuda, foi EXCELENTE.
Obrigada pelas dicas: aprendi, entendi e resolvi meu problema!
Bom final de semana!
BRIGADAO!
Uma outra curiosidade:
Tem como fazer IF ELSE / E OU para testar se DIV01 foi clicada OU DIV02 OU DIV03???
Exemplo:
Clico em 3 divs e no final me mostra um alert…
Mas essas tres divs sao um conjunto de 10 divs: se eu clicar na DIV01 E DIV02 OU DIV003 E DIV09 me mostra o alert…
Tem como???
Abraçao…
Brigada
Sim, a idéia é a mesma. Você pode conferir as variáveis, por exemplo:
Caso você realmente vá ter muitas divs (sei lá, mais de 3), sugiro armazenar esta informação de click num array. Aí você não precisa declarar um monte de variáveis diferentes.