单击所有图像以继续？Jquery？

我有五个图像，当点击载入一个包含。一旦用户浏览了include页面，就会提示他们返回到五幅图像。所有这些都使用.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" />

---

谢谢，

您可以尝试以下方法：

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" />

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

    if($('.notclicked').length == 0)
        // Show your button
});

---

单击图像时，我会将css类添加到图像中。然后我将检查具有该purticulr类的项目数。如果这是您的限制（例如：5），这意味着所有5个图像都被单击，现在做任何您想做的事情（显示按钮或..）

---

工作示例

由于其他答案都涉及添加类，因此我将使用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>

---

如果这看起来有点奇怪，我做了一个关于延迟的非AJAX使用的测试，这可能会有所帮助。

哦，太慢了，这里有另一个添加类和计数的方法（使用div而不是image）：）

HTML:

---

你调查过点击事件吗？你试过什么？我知道一些jquery，但我有点像个傻瓜。我理解点击事件。我正在考虑使用indexOf（）。您使用的是什么版本的jquery？已弃用，应替换为或基于您的版本。请更新您的问题以包含您尝试过的javascript。

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

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

$(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!');
        }           
    });
});​