点击所有图片继续？ 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的？

回答

相关问题