Comunidad de diseño web y desarrollo en internet online

.show() aparece y desaparece rapidamente su contenido

Citar            
MensajeEscrito el 05 Jun 2018 06:22 pm
Espero me puedan ayudar con este problema que tengo, lo que tengo que realizar es que cuando no se da la respuesta correcta tiene que aparecer una leyenda del porque no es esa la respuesta correcta, previamente ya habia ocultado las ayudas desde css para poderlas mostrar desde un .show(), pero al momento de validar una respuesta esta ayuda, aparece y desaparece rapidamente, no se mantiene la ayuda, si le pongo milisegundos no realiza la funcion y no aparece nada. ayuda porfavor, no lo voy a mandar por php, de momento nadamas es asi.


Código HTML :

<div>
    <p>¿África, América, Antártida, Asia, Europa, y Oceanía son?</p>
    <form action="">
        <input type="radio" name="pregunta1" value="1" id="respuesta1">
        <label for="respuesta1">Países</label><br>
            <p class="ayudas" id="ayuda1">Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado.</p>

        <input type="radio" name="pregunta1" value="2" id="respuesta2">
        <label for="respuesta2">Municipios</label><br>
            <p class="ayudas" id="ayuda2">División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento.</p>

        <input type="radio" name="pregunta1" value="3" id="respuesta3">
        <label for="respuesta3">Estados / provincias</label><br>
            <p class="ayudas" id="ayuda3">Es una organización política forzosa e involuntaria constituida por instituciones burocráticas y administrativas estables, como la policía, los militares etc. a través de las cuales ejerce el monopolio del uso legal de la fuerza física (soberanía) aplicada a una población dentro de unos límites territoriales establecidos.</p>

        <input type="radio" name="pregunta1" value="4" id="respuesta4">
        <label for="respuesta4">Continentes</label><br>
            <p class="ayudas" id="ayuda4">Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.</p>

        <input type="radio" name="pregunta1" value="5" id="respuesta5">
        <label for="respuesta5">Islas</label><br>
            <p class="ayudas" id="ayuda5">Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua.</p>

        <button id="button">Validar</button>
    </form>
</div>


Código CSS :

#ayuda1, #ayuda2, #ayuda3, #ayuda4, #ayuda5{
    text-align: right;
    display: none;
}


Código Javascript :

$(document).ready(function()
      {
      $("#button").click(function () {    
         var valor_val = ($('input:radio[name=pregunta1]:checked').val());
         if (valor_val == 1){
            $("#ayuda1").show();
         }else if (valor_val == 2) {
            $("#ayuda2").show();
         }else if (valor_val == 3){
            $("#ayuda3").show();
         }else if (valor_val == 4){
            $("#ayuda4").show();
         }else if (valor_val == 5){
            $("#ayuda5").show();
         }else{
            alert("selecciona una opción");
         }
         });

       });

Por Traucoaluca

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 06 Jun 2018 12:26 pm
No hay nada en tu codigo que le vuelva a dar el display none, aunque entiendo que si clickea otra respuesta y habia una ayuda anterior desplegada se tiene que ocultar,
Que dice la definicion del estilo ayudas? No tendras en algun lado un hide() ?

Jorge

Por solisarg

BOFH

13507 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

chrome
Citar            
MensajeEscrito el 06 Jun 2018 02:00 pm

solisarg escribió:

No hay nada en tu codigo que le vuelva a dar el display none, aunque entiendo que si clickea otra respuesta y habia una ayuda anterior desplegada se tiene que ocultar,
Que dice la definicion del estilo ayudas? No tendras en algun lado un hide() ?

Jorge

Anteriormente haciendo pruebas pense que ese era el problema cuando con la clase "ayudas" desde css lo ocultaba desde display: none; (lo mismo que esta en css pero en vez de que sea ayuda1,ayuda2.... lo quise hacer desde "ayudas")

Por Traucoaluca

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 06 Jun 2018 02:38 pm
Asegurate que no hay otro estilo que lo oculte en ningun lado

Jorge

Por solisarg

BOFH

13507 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 06 Jun 2018 05:17 pm

solisarg escribió:

Asegurate que no hay otro estilo que lo oculte en ningun lado

Jorge

Es todo lo que hay, ya no hay mas.

Por Traucoaluca

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 06 Jun 2018 06:23 pm
el problema era con la etiqueta button, debia estar afuera de las etiquetas form, si se desea poner una input, tiene que se de la siguiente manera
<form>
...
...
...
<input type="button" name="pregunta1" id="button" value="Validar">
</form>

Por Traucoaluca

2 de clabLevel



 

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.