[SOLUCIONADO] Mostrar texto despues de presionar boton

jeffvv · #1 (**permalink**) 27/08/2015, 00:23

Hola comunidad, tengo una duda. Necesito que un texto se muestre despues de presionar 4 botones. Pero solo he conseguido agregar 4 botones q desaparecen y en el div final le agregue el codigo para que aparezca el texto y si funciona, pero yo quiero que detecte que se han presionado los 3 botones anteriores para recien funcionar el ultimo, y como lo tengo actualmente basta con presionar el ultimo boton para que aparezca el texto sin necesidad de haber presionado antes los 3 botones.

Gracias de antemano.

Este es mi codigo actual:

Código PHP:

  <html> 
<head> 
 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
 
<style type="text/css"> 
    .fadeOutbox, .fadeInbox, .fadeTobox{ 
        float:left; 
        padding:8px; 
        margin:16px; 
        border:1px solid red; 
        width:200px; 
        height:50px; 
        background-color:#000000; 
        color:white; 
    } 
    .clear{ 
        clear:both; 
    } 
</style> 
 
</head> 
 
<body> 
 
<h1>jQuery fadeIn(), fadeOut() and fadeTo() example</h1> 
 
 
<div class="clear"> 
    <h2>fadeOut() example</h2> 
     
    <div class="fadeOutbox"> 
        Click me - fadeOut() 
    </div> 
     
    <div class="fadeOutbox"> 
        Click me - fadeOut() 
    </div> 
     
    <div class="fadeOutbox"> 
        Click me - fadeOut() 
    </div> 
     
    <div class="fadeOutbox" onClick="document.getElementById('oculto').style.visibility='visible'"> 
        Click me - fadeOut() 
    </div> 
</div> 
<div id="oculto" style="visibility:hidden">  
Mensaje oculto 
</div>  
 
 
<script type="text/javascript"> 
 
$(".fadeOutbox").click(function () { 
   $(this).fadeOut('slow'); 
}); 
</script> 
 
</body> 
</html>

Alexis88 · #2 (**permalink**) 27/08/2015, 10:27

Una forma rápida de hacer esto consiste en lo siguiente:

Asigna una clase a los cuatro botones.
Establece una variable global cuyo valor inicial debe ser igual a cero.
Delega el evento click al documento.
Cada vez que se produzca dicho evento, verifica que el elemento clickeado posea la clase que asignaste a los botones.
De ser así, incrementas el valor de la variable global en uno.
Finalmente, verificas el valor actualizado de la variable y si es igual a 4 o al total de botones (si quisieras trabajar con más o menos botones), muestras el texto.

Un ejemplo:

Código HTML:

Ver original<button class = "ejemplo">Botón 1</button>
<button class = "ejemplo">Botón 2</button>
<button class = "ejemplo">Botón 3</button>
<button class = "ejemplo">Botón 4</button>
 
<div id = "foo">El texto</div>

Código Javascript:

Ver originaldocument.addEventListener("DOMContentLoaded", function(){
    var total = 0;
    document.addEventListener("click", function(event){
        if (event.target.className == "ejemplo"){
            total++;
        }
 
        if (total == document.querySelectorAll(".ejemplo").length){
            document.querySelector("#foo").style.display = "block";
        }
    }, false);
}, false);

Para detectar al elemento afectado por el evento, utilicé la propiedad event.target.

Saludos