Operador AND OR JQuery

Front-end
#1

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.

[code]$(function(){
$("#div01,#div02").click(function(){
alert(“A div foi clicada.”)
});

});[/code]

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.

#2

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).

#3

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,

#4

Tentou debugar o código? Ver se ele entra dentro das funções de clique.

Qualquer coisa cola como você fez pra eu ver. (=

#5

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!!!

#6

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.

#7

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!

#8

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

#9

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.

#10