點擊所有圖片繼續？ jQuery的？

我有五個圖像，當點擊加載包含。一旦用戶瀏覽了包含頁面，他們就會回到五個圖像。所有這些都使用.load（）函數。一旦用戶點擊了所有五個圖像，我希望有一個繼續按鈕彈出，然後進入下一頁。我如何記錄點擊，當點擊五個特定圖像時會彈出一個繼續按鈕？點擊所有圖片繼續？ jQuery的？

圖像通常以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" />

感謝，

來源

2012-07-31 Kenneth Ashley

你看過點擊事件嗎？你有什麼嘗試？ – Utkanos 2012-07-31 14:59:33

我知道一些jquery，但我是一種小菜。我瞭解點擊事件。我正在考慮使用indexOf（）。 – 2012-07-31 15:03:45

你可以嘗試沿着以下線的東西：

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-31 15:02:09

這不會爲我工作。我嘗試了$（'。notclicked'）。live（'click'，function（）... – 2012-07-31 15:39:36

jquery使用什麼版本？[live（）]（http://api.jquery.com/live/）已棄用，應根據您的版本由[on（）]（http://api.jquery.com/on/）或[delegate（）]（http://api.jquery.com/delegate/）取代。請更新你的問題，包括你已經嘗試過的JavaScript。 – 2012-07-31 15:49:16

我會添加一個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-31 15:04:25 Shyju

糟糕..我想你的意思是這個http://jsfiddle.net/SySUS/17/ – neokio 2012-07-31 15:09:45

因爲其它所有的答案應對加課，我會扔東西有點不同混進去，使用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>

個

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

如果這看起來有點怪異，我做了deferreds可能有助於在非AJAX一個detailed blog post使用。

來源

2012-07-31 15:09:30 Utkanos

謝謝你的幫助！ – 2012-07-31 15:40:03

哦太慢，這裏是另一個添加類和計數方法（用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-31 15:19:40

點擊所有圖片繼續？ jQuery的？

回答

相關問題