¿Hacer clic en todas las imágenes para continuar? jquery?

Tengo cinco imágenes que al hacer clic en cargar un incluir. Una vez que el usuario ha pasado por la página de inclusión, se le solicita volver a las cinco imágenes. Todo esto está usando la función .load(). Una vez que el usuario hace clic en las cinco imágenes, deseo que aparezca un botón de continuar para luego pasar a la página siguiente. ¿Cómo registro un clic y cuando se hace clic en cinco imágenes específicas aparece un botón de continuar?

Las imágenes se configuran normalmente en html como se muestra a continuación.

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

Gracias,

preguntado el 31 de julio de 12 a las 15:07

¿Has investigado los eventos de clic? ¿Qué has probado? -

Sé algo de jquery, sin embargo, soy una especie de novato. Entiendo los eventos de clic. Estaba pensando en usar indexOf(). -

4 Respuestas

Puedes probar algo en la línea de lo siguiente:

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

Respondido 31 Jul 12, 16:07

¿Qué versión de jquery estás usando? En Vivo() está en desuso y debería ser reemplazado por on() or delegar() en base a su versión. Actualice su pregunta para incluir su javascript que ha probado. - jose mein

Dado que las otras respuestas se ocupan de agregar clases, agregaré algo un poco diferente a la mezcla, usando la API de objetos diferidos de jQuery:

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

Si esto parece un poco raro, hice un publicación detallada del blog sobre usos que no son AJAX para diferidos que podrían ayudar.

Respondido 31 Jul 12, 16:07

Agregaría una clase css a las imágenes cuando se haga clic. luego verificaré la cantidad de artículos que tiene esa clase particular. Si es su límite (por ejemplo: 5), eso significa que se hizo clic en las 5 imágenes, ahora haga lo que quiera (botón mostrar o ..)

$(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");   
         }                
    });           
});

Muestra de trabajo http://jsfiddle.net/SySUS/19/

Respondido 31 Jul 12, 16:07

Oh, demasiado lento, aquí hay otro enfoque de agregar clase y contar (con div en lugar de imagen) :)

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

Respondido 31 Jul 12, 16:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.