3

クリックするとインクルードが読み込まれる5つの画像があります。ユーザーがインクルード ページを通過すると、5 つの画像に戻るように求められます。これらはすべて .load() 関数を使用しています。ユーザーが5つの画像すべてをクリックすると、続行ボタンがポップアップして次のページに進みます。クリックを記録し、特定の 5 つの画像をクリックすると [続行] ボタンがポップアップ表示されるようにするにはどうすればよいですか?

画像は、通常、次のように html に設定されます。

<img class="img1" src="img/img1.png" />
<img class="img2" src="img/img2.png" /> 
<img class="img3" src="img/img3.png" />
<img class="img4" src="img/img4.png" />

ありがとう、

4

4 に答える 4

4

次の行に沿って何かを試すことができます。

HTML :

<img class="img1 notclicked" src="img/img1.png" />
<img class="img2 notclicked" src="img/img2.png" /> 
<img class="img3 notclicked" src="img/img3.png" />
<img class="img4 notclicked" src="img/img4.png" />

Javascript :

$('.notclicked').click(function() {
    $(this).removeClass('notclicked');

    if($('.notclicked').length == 0)
        // Show your button
});
于 2012-07-31T15:02:09.267 に答える
1

クリックされたときに画像に css クラスを追加します。次に、その purticulr クラスを持つアイテムの数を確認します。それがあなたの限界（例：5）である場合、それは5つの画像すべてがクリックされたことを意味します。

$(function(){

      $(".img1, .img2, .img3, .img4, .img5").click(function(){
        var item=$(this);
        //load image or whatever you want to do

         item.addClass("clicked");
         var totalClicked=$(".clicked").length;
         if(totalclicked==5)
         {
             alert("show /hide button");   
         }                
    });           
});

作業サンプルhttp://jsfiddle.net/SySUS/19/

于 2012-07-31T15:04:25.350 に答える
1

他の回答はすべてクラスの追加を扱っているため、jQuery の遅延オブジェクト API を使用して、少し異なるものをミックスに投入します。

HTML

<div id='imgs_container'>
    <img src="img/img1.png" />
    <img src="img/img2.png" /> 
    <img src="img/img3.png" />
    <img src="img/img4.png" />
</div>

JS

var dfds = [];
$('#imgs_container img')
    .each(function() { dfds.push(new $.Deferred); })
    .on('click', function() { dfds[$(this).index()].resolve(); });
$.when.apply($, dfds).done(function() {
    //code to show button here
});

これが少し奇妙に見える場合は、AJAX 以外の deferred の使用に関する詳細なブログ投稿を行ったので、参考になるかもしれません。

于 2012-07-31T15:09:30.277 に答える
0

遅すぎる、ここに別のクラスとカウントの追加アプローチがあります（画像の代わりにdivを使用）:)

http://jsfiddle.net/9T6xe/2/

HTML:

<div class="click-me">1</div>
<div class="click-me">2</div>
<div class="click-me">3</div>
<div class="click-me">4</div>​

JS:

$(function() {

    //elements to be clicked
    var $div = $('.click-me');


    //check if everyt div has been clicked, by checking if the num of elements with class done is equal to amount of elements
    function everyDivAlreadyclicked() {
        return $div.filter('.done').length === $div.length;
    }

    $div.bind('click', function() {

        //add done class
        $(this).addClass('done').text('clicked');

        if (everyDivAlreadyclicked()) {
            //if every div was clicked, profit!
            alert('yay done!');
        }           
    });
});​
于 2012-07-31T15:19:40.127 に答える