Hide and show DIVs

Question

Hide and show DIVs

Navigation

#1 by (3 votes)

1

I am trying to do a questionnaire that by clicking on the radio button, go to the next question, but I have a detail with the counter and print question 5 after 1, I thank you very much if you can help me with this question , thank you.

$(document).ready(function() {

    //Muestra y oculta div's y botón

    $("#div1").show();

    $("#div2,#div3,#div4,#div5").hide();
    $("#btnenvia").hide();

    $("input[type=radio]").click(function(event) {

        var valor = $(event.target).val();

        var int = 1;

        while (int <= 5) {
           //Aquí comparo que el valor de **value** de los radiobutton sea diferente de 0
            if (valor != 0) {
                $("#div" + (int - 1)).hide();
                $("#div" + (int)).show(1000);
            }
            //muestra boton de envia cuando el contador llegue a 5
            int++;
            if (int == 5) {
                $("#btnenvia").show();
            }
        }
    });

});

javascript jquery html

asked by omarhl107 19.06.2018 в 22:17

source

1 answer

I need to do bootstrap / 3.3.6, jquery2.2.0 live with jquery-1.12.4. and jquery-ui.js to use datepicker.de jquery-ui Overwrite Object

score 3 · Accepted Answer

What happens is that you are accumulating the counter in the same while, which makes it reset each time it is executed (and therefore goes from 1 to 5 without stopping)

You can review this example that I think it does what you're looking for (although changing the radius by a convenience button)

$(document).ready(function() {
    var contador = 1;
    //Muestra y oculta div's y botón

    $("#div1").show();

    $("#div2,#div3,#div4,#div5").hide();
    $("#btnenvia").hide();

    $("input[type=button]").click(function(event) {

        var valor = $(event.target).val();

        var int = 0

        while (int <= contador) {
            if (valor != 0) {
                $("#div" + (int)).hide();
            }
            //muestra boton de envia cuando el contador llegue a 5
            int++;
            if (int == 5) {
                $("#btnenvia").show();
            }
        }
        contador++;
        $("#div" + (int)).show(1000);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"> Div 11 </div>
<br>
<div id="div2"> Div 2 </div>
<br>
<div id="div3"> Div 3 </div>
<br>
<div id="div4"> Div 4 </div>
<br>
<div id="div5"> Div 5 </div>
<br>
<input type="button" value="algo">