Question

hello all how can I achieve a memory effect with my code? With memory effect I mean: you can click two images to show() them. On the third click the showing images hide() and the next two images can be clicked on to shown.

edit: the third click should show the first image of the second try.

In my example this works only once, because I don’t know where to return or reset the amountofclicks.

Hope you can help me out?

JSFIDDLE

HTML

<div id="container">

<div class="coverup">

     <div class="hoverdiv">
     </div>

     <div class="image">
     </div>


</div>

    <div class="coverup">

     <div class="hoverdiv">
     </div>

     <div class="image">
     </div>


</div>

    <div class="coverup">

     <div class="hoverdiv">
     </div>

     <div class="image">
     </div>


</div>

    <div class="coverup">

     <div class="hoverdiv">
     </div>

     <div class="image">
     </div>


</div>

    <div class="coverup">

     <div class="hoverdiv">
     </div>

     <div class="image">
     </div>


</div>

    <div class="coverup">

     <div class="hoverdiv">
     </div>

     <div class="image">
     </div>

</div>

    <div class="coverup">

     <div class="hoverdiv">
     </div>

     <div class="image">
     </div>


</div>

    <div class="coverup">

     <div class="hoverdiv">
     </div>

     <div class="image">
     </div>


</div>

JS

var amountofclicks = 0;
$('.coverup').hover(

function() {
    $(this).find('.hoverdiv').fadeTo('fast', 0.5);
}, function() {
    $(this).find('.hoverdiv').fadeOut('fast');
});

$('.coverup').bind("click", function(event) {

    if (amountofclicks < 2) {
        $(this).find('.image').show();
        amountofclicks++;
        $(this).unbind('click');
        $('.hoverdiv').hide();
    } else {
        $('.image').hide();
        return;
    }

});

Answer 1

You have to reset amountofclicks. jsFiddle: http://jsfiddle.net/P99Xu/4/

Also, no need to unbind the click.

$('.coverup').bind("click", function(event) {

    if (amountofclicks < 2) {
        $(this).find('.image').show();
        amountofclicks++;
        $('.hoverdiv').hide();
    } else {
        $('.image').hide();
        $(this).find('.image').show();
        amountofclicks = 1;
        return;
    }

});