[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