clicar em duas divs e então dar o resultado

[marcelo2605 10]

Pessoal,

 

Tenho várias divs em uma página e preciso criar um script onde o usuário clica em uma div, clica em outra e então o script compara a classe das duas. Se forem iguais, faz uma coisa; se forem diferentes, faz outra coisa.

[Bru_ce 53]

ficou meio vago, pois como o usuário vai clicar nos 2 links ao mesmo tempo ?

pense e faça assim,

 

 

<script>

document.ready(function(){
var classe1 = $("#link1").attr("class");
var classe2 = $("#link2").attr("class");

if(classe1 == classe2){
alert("As Classes são iguais");
}

});

</script>

[marcelo2605 10]

Bruce, na verdade ele clica na primeira div e depois na segunda. Então o script compara o valor das duas, entende?

 

É como um jogo de encontrar os pares, sabe?

[Bru_ce 53]

Quando o usuário clicar em algum dos links, guarda o valor 1 por exemplo em uma variável,

ai quando ele clicar no outro você verifica se la existe o valor 1, caso exista você compara as classes, simples !

[marcelo2605 10]

Mas como vou dizer ao script qual é a primeira div e qual é a segunda, sendo que todas possuem a, mesma classe?

 

<div id="box1_1" class="box dupla1"></div>
<div id="box1_2" class="box dupla2"></div>
<div id="box1_3" class="box dupla3"></div>
<div id="box2_1" class="box dupla1"></div>
<div id="box2_2" class="box dupla2"></div>
<div id="box2_3" class="box dupla3"></div>

 

$('.box').click(function() {
 var $this = $(this);
 var palavra1 = $this.attr('id');
 console.log('palavra1: ', palavra1);
});

[Bru_ce 53]

Esconde as outras,

ai elas só ficam visíveis caso o usuário clicar na primeira !

[marcelo2605 10]

Fiz o seguinte:

 

function comparar(){

$('.box').click(function() {
   var $this = $(this);
   var palavra1 = $this.attr('id');
   console.log('palavra1: ', palavra1);
   $('.box').not($this).addClass('clique2');
});

$('.clique2').click(function() {
   var $this = $(this);
   var palavra2 = $this.attr('id');
   console.log('palavra2: ', palavra2);
});

}

 

Mas como faço para a primeira função click ser executada somente uma vez?

 

Bruce, mas é uma espécie de jogo. Então todas precisam ficar visíveis.

[Vadio 13]

http://jsfiddle.net/eric_freitas/aQkKn/

[marcelo2605 10]

Entendi, mas isso funcionaria se fossem mais de duas divs?

 

Pensei no seguinte:

 

<div id="box1_1" class="box dupla1 clique1"></div>
<div id="box1_2" class="box dupla2 clique1"></div>
<div id="box1_3" class="box dupla3 clique1"></div>
<div id="box2_1" class="box dupla1 clique1"></div>
<div id="box2_2" class="box dupla2 clique1"></div>
<div id="box2_3" class="box dupla3 clique1"></div>

 

function comparar(){


$('.clique1').click(function() {
var $this = $(this);
   var palavra1 = $this.attr('id');
console.log('palavra1: ', palavra1);
$('.box').not($this).addClass('clique2').removeClass('clique1');
});

$('.clique2').click(function() {
var $this = $(this);
   var palavra2 = $this.attr('id');
console.log('palavra2: ', palavra2);
});



}

 

para mim, faz sentido. Mas ele não pega a palavra2.

[marcelo2605 10]

Pessoal, resolvi parte do problema:

 

function comparar(){

$('.clique1').bind('click', function() {
var $this = $(this);
$('.clique1').unbind('click');
       var palavra1 = $this.attr('class').split(' ')[1];
console.log('palavra1: ', palavra1);
$('.box').not($this).addClass('clique2').removeClass('clique1');
});

$('body').on('click', '.clique2', function() {
var $this = $(this);
       var palavra2 = $this.attr('class').split(' ')[1];
console.log('palavra2: ', palavra2);
});

}

 

Agora como comparo as duas variáveis (palavra1 e palavra2) para, se forem iguais, chamarem uma função?