0

こんにちは、どうすればコードでメモリー効果を実現できますか？メモリー効果とは、つまり、2つの画像をクリックしてshow（）することができます。3回目のクリックで、表示中の画像hide（）をクリックすると、次の2つの画像をクリックして表示できます。

編集：3回目のクリックで、2回目の試行の最初の画像が表示されます。

私の例では、クリック数をどこに戻すかリセットするかわからないため、これは1回だけ機能します。

あなたが私を助けてくれることを願っていますか？

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;
    }

});
4

2 に答える 2

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;
    }

});
于 2012-12-25T15:39:06.937 に答える
1

amountofclicks = 02に達し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;
    }

});​
于 2012-12-25T15:40:52.053 に答える