3

我有五个图像，当单击加载包含时。一旦用户浏览完包含页面，他们就会被提示返回五个图像。所有这些都使用 .load() 函数。一旦用户单击所有五个图像，我希望弹出一个继续按钮，然后继续到下一页。我如何记录一次点击，当点击五个特定图像时会弹出一个继续按钮？

图像通常在 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 用于延迟的详细博客文章，这可能会有所帮助。

于 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 回答