Question

你好我怎么能用我的代码实现记忆效应？记忆效应我的意思是：你可以点击两个图像来显示（）它们。在第三次单击显示图像hide（），然后可以单击接下来的两个图像以显示。

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

在我的例子中，这只能工作一次，因为我不知道在哪里返回或重置金额。

希望你能帮助我吗？

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点击事件。

<强> Live Demo

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

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

});

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

2 个答案: