jquery - jquery如何记忆效果：显示两个，然后隐藏并重复

Question

大家好，我怎样才能用我的代码实现记忆效应？我的意思是记忆效应：您可以单击两个图像来显示（）它们。在第三次单击显示图像 hide() 并且可以单击接下来的两个图像来显示。

编辑：第三次点击应该显示第二次尝试的第一张图片。

在我的示例中，这只适用于一次，因为我不知道在哪里返回或重置点击量。

希望你能帮助我吗？

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

你必须重置amountofclicks。jsFiddle：http: //jsfiddle.net/P99Xu/4/

此外，无需取消绑定点击。

$('.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;
    }

});

Answer 2

amountofclicks = 0达到 2 时设置并else part执行。您不需要unbind点击事件。

现场演示

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

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

});​