Actualmente estoy usando el código a continuación.

Funciona bien, sin embargo, el script jQuery me parece una pérdida masiva de código. Sin embargo, no estoy seguro de cómo usar correctamente un bucle while para adaptarse a esta situación.
¿Cuál es la mejor manera de hacerlo de manera eficiente?

HTML

<div class="grid1">
    <h5>Div Quantity <input id="divs_qt" type="number" min="1" max="20" step="1" value="1"></h5>
    <div id="div01">
        <h6>Div 01</h6>
        <p class="div">
            <label for="div01_info01">Info 01</label>
            <input type="text" name="div01_info01" id="div01_info01">
        </p>
        <p class="div">
            <label for="div01_info02">Info 02</label>
            <input type="text" name="div01_info02" id="div01_info02">
        </p>
        <p class="div">
            <label for="div01_info03">Info 03</label>
            <input type="text" name="div01_info03" id="div01_info03">
        </p>
        <p class="div">
            <label for="div01_info04">Info 04</label>
            <input type="text" name="div01_info04" id="div01_info04">
        </p>
        <p class="div">
            <label for="div01_info05">Info 05</label>
            <input type="text" name="div01_info05" id="div01_info05">
        </p>
    </div>
    <div id="div02">
        <h6>Div 02</h6>
        <p class="div">
            <label for="div02_info01">Info 01</label>
            <input type="text" name="div02_info01" id="div02_info01">
        </p>
        <p class="div">
            <label for="div02_info02">Info 02</label>
            <input type="text" name="div02_info02" id="div02_info02">
        </p>
        <p class="div">
            <label for="div02_info03">Info 03</label>
            <input type="text" name="div02_info03" id="div02_info03">
        </p>
        <p class="div">
            <label for="div02_info04">Info 04</label>
            <input type="text" name="div02_info04" id="div02_info04">
        </p>
        <p class="div">
            <label for="div02_info05">Info 05</label>
            <input type="text" name="div02_info05" id="div02_info05">
        </p>
    </div>
    <!-- Etc... -->
    <div id="div20">
        <h6>Div 20</h6>
        <p class="div">
            <label for="div20_info01">Info 01</label>
            <input type="text" name="div20_info01" id="div20_info01">
        </p>
        <p class="div">
            <label for="div20_info02">Info 02</label>
            <input type="text" name="div20_info02" id="div20_info02">
        </p>
        <p class="div">
            <label for="div20_info03">Info 03</label>
            <input type="text" name="div20_info03" id="div20_info03">
        </p>
        <p class="div">
            <label for="div20_info04">Info 04</label>
            <input type="text" name="div20_info04" id="div20_info04">
        </p>
        <p class="div">
            <label for="div20_info05">Info 05</label>
            <input type="text" name="div20_info05" id="div20_info05">
        </p>
    </div>
</div>

Javascript

$("#divs_qt").change(function() {
    switch (this.value) {
        case "1":
            $("#div01").css({display: "block"});
            $("#div02").css({display: "none"});
            $("#div03").css({display: "none"});
            $("#div04").css({display: "none"});
            $("#div05").css({display: "none"});
            $("#div06").css({display: "none"});
            $("#div07").css({display: "none"});
            $("#div08").css({display: "none"});
            $("#div09").css({display: "none"});
            $("#div10").css({display: "none"});
            $("#div11").css({display: "none"});
            $("#div12").css({display: "none"});
            $("#div13").css({display: "none"});
            $("#div14").css({display: "none"});
            $("#div15").css({display: "none"});
            $("#div16").css({display: "none"});
            $("#div17").css({display: "none"});
            $("#div18").css({display: "none"});
            $("#div19").css({display: "none"});
            $("#div20").css({display: "none"});
            break;
        case "2":
            $("#div01").css({display: "block"});
            $("#div02").css({display: "block"});
            $("#div03").css({display: "none"});
            $("#div04").css({display: "none"});
            $("#div05").css({display: "none"});
            $("#div06").css({display: "none"});
            $("#div07").css({display: "none"});
            $("#div08").css({display: "none"});
            $("#div09").css({display: "none"});
            $("#div10").css({display: "none"});
            $("#div11").css({display: "none"});
            $("#div12").css({display: "none"});
            $("#div13").css({display: "none"});
            $("#div14").css({display: "none"});
            $("#div15").css({display: "none"});
            $("#div16").css({display: "none"});
            $("#div17").css({display: "none"});
            $("#div18").css({display: "none"});
            $("#div19").css({display: "none"});
            $("#div20").css({display: "none"});
            break;
        // etc...
        case "20":
            $("#div01").css({display: "block"});
            $("#div02").css({display: "block"});
            $("#div03").css({display: "block"});
            $("#div04").css({display: "block"});
            $("#div05").css({display: "block"});
            $("#div06").css({display: "block"});
            $("#div07").css({display: "block"});
            $("#div08").css({display: "block"});
            $("#div09").css({display: "block"});
            $("#div10").css({display: "block"});
            $("#div11").css({display: "block"});
            $("#div12").css({display: "block"});
            $("#div13").css({display: "block"});
            $("#div14").css({display: "block"});
            $("#div15").css({display: "block"});
            $("#div16").css({display: "block"});
            $("#div17").css({display: "block"});
            $("#div18").css({display: "block"});
            $("#div19").css({display: "block"});
            $("#div20").css({display: "block"});
            break;
        default:
            $("#div01").css({display: "block"});
            $("#div02").css({display: "none"});
            $("#div03").css({display: "none"});
            $("#div04").css({display: "none"});
            $("#div05").css({display: "none"});
            $("#div06").css({display: "none"});
            $("#div07").css({display: "none"});
            $("#div08").css({display: "none"});
            $("#div09").css({display: "none"});
            $("#div10").css({display: "none"});
            $("#div11").css({display: "none"});
            $("#div12").css({display: "none"});
            $("#div13").css({display: "none"});
            $("#div14").css({display: "none"});
            $("#div15").css({display: "none"});
            $("#div16").css({display: "none"});
            $("#div17").css({display: "none"});
            $("#div18").css({display: "none"});
            $("#div19").css({display: "none"});
            $("#div20").css({display: "none"});
    }
});

Código de trabajo completo en: http://jsfiddle.net/9g5y3fa3/

-2
Feel The Noise 2 sep. 2014 a las 18:13

5 respuestas

La mejor respuesta

Tu enfoque es defectuoso. Un principio muy importante en el desarrollo de aplicaciones es "No te repitas", o < a href = "http://en.wikipedia.org/wiki/Don't_repeat_yourself" rel = "nofollow noreferrer"> DRY para abreviar.

En lugar de repetir 20 elementos una y otra vez, use una sola plantilla y luego renderice esa plantilla tantas veces como sea necesario. Girish ya te ha dado un ejemplo usando un sistema de plantillas personalizado, pero recomiendo usar algo un poco más poderoso como < a href = "http://handlebarsjs.com/" rel = "nofollow noreferrer"> HandlebarsJS . Te da mucho más espacio para crecer cuando te das cuenta de que necesitas más matices en tu plantilla.

Ni siquiera necesita descargar o instalar nada, solo use el Handlebars CDN (incluir handlebars.js y handlebars.runtime.js a través de una etiqueta <script src=""></script>).

Su código terminará pareciéndose a esto:

Html

Una sola plantilla HTML. Muy útil si te das cuenta de que necesitas agregar información06 al formulario.

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.js"></script>
<script id="item-template" type="text/x-handlebars-template">
    <div id="div{{index}}">
        <h6>Div {{index}}</h6>
        <p class="div">
            <label for="div{{index}}_info01">Info 01</label>
            <input type="text" name="div{{index}}_info01" id="div{{index}}_info01" />
        </p>
        <p class="div">
            <label for="div{{index}}_info02">Info 02</label>
            <input type="text" name="div{{index}}_info02" id="div{{index}}_info02" />
        </p>
        <p class="div">
            <label for="div{{index}}_info03">Info 03</label>
            <input type="text" name="div{{index}}_info03" id="div{{index}}_info03" />
        </p>
        <p class="div">
            <label for="div{{index}}_info04">Info 04</label>
            <input type="text" name="div{{index}}_info04" id="div{{index}}_info04" />
        </p>
        <p class="div">
            <label for="div{{index}}_info05">Info 05</label>
            <input type="text" name="div{{index}}_info05" id="div{{index}}_info05" />
        </p>
    </div>
</script>
<div class="grid1">
    <h5>Div Quantity <input id="divs_qt" type="number" min="1" max="20" step="1" value="1" /></h5>
    <div id="container">
    </div>
</div>

Javascript

var container = $("#container");
var source    = $("#item-template").html();
var template  = Handlebars.compile(source);

// Pre-render the items
var prerenderedItems = [];
for ( var i = 1; i <= 20; i++ ){
    var context = { index: ( i < 10 ? '0' + i : '' + i ) }
    prerenderedItems.push( $( template(context) ) );
}

// Render 1 item for the initial load
renderItems(1);

function renderItems( itemCount ){
    // Detach all prerendered items from the DOM
    $.each( prerenderedItems, function(){ this.detach(); } );

    for ( var i = 0; i < itemCount; i++ ){
        // Reattach the appropriate items
        container.append( prerenderedItems[i] );
    }
}

$("#divs_qt").change(function() {
    renderItems( this.value );
});

¡Eso es!

Vea un ejemplo de trabajo aquí: http://jsfiddle.net/5q1k5v8d/7/

2
Community 23 may. 2017 a las 10:33

Basado en la respuesta de Anoop, pero esto usa el método "cada" para crear un ciclo a través de cada uno de los divs, mostrándolos u ocultándolos en función de si su índice es tan alto como el valor elegido.

$("#divs_qt").change(function() {
    var value = this.value;
    $("div[id^=div]").each(function(i) {
        $(this).toggle(i < value);
    });
});

FIDDLE Demo

0
StriplingWarrior 2 sep. 2014 a las 14:22

He editado un poco la respuesta de Girish y esto funciona incluso después de las 10

$("#divs_qt").change(function() {
    $("div[id*=div]").css({display: "none"});
    for(var i = 1; i <= parseInt(this.value); i++){
        if(i <= 9){
            $("div[id=div0" + i + "]").css({display: "block"});
        }else{
            $("div[id=div" + i + "]").css({display: "block"});
        }
    }
});
-1
Yunus Aslam 2 sep. 2014 a las 14:24

Prueba un código simple

$("#divs_qt").change(function () {
    $("div[id*=div]").css({
        display: "none"
    });
    for (var i = 1; i <= parseInt(this.value); i++) {
        $(i < 10 ? "div[id=div0" + i + "]" : "div[id=div" + i + "]")
            .css({
            display: "block"
        });
    }
});

Código actualizado como comentario mejor por plantilla de uso y agregue element según el contador

Script

$("#yd").html($("#template").html().replace(/\@/g, "01"));
$("#divs_qt").change(function() {
    $("#yd").empty();
    for(var i = 1; i <= parseInt(this.value); i++){
         $("#yd").append($("#template").html().replace(/\@/g, i))         
    }
});

HTML

<script type="text/templeate" id="template">

                <div id="div@">
            <h6>Div @</h6>
            <p class="div">
                <label for="div@_info01">Info 01</label>
                <input type="text" name="div@_info01" id="div@_info01">
            </p>
            <p class="div">
                <label for="div@_info02">Info 02</label>
                <input type="text" name="div@_info02" id="div@_info02">
            </p>
            <p class="div">
                <label for="div@_info03">Info 03</label>
                <input type="text" name="div@_info03" id="div@_info03">
            </p>
            <p class="div">
                <label for="div@_info04">Info 04</label>
                <input type="text" name="div@_info04" id="div@_info04">
            </p>
            <p class="div">
                <label for="div@_info05">Info 05</label>
                <input type="text" name="div@_info05" id="div@_info05">
            </p>
        </div>
            </script>
<div class="grid1">
    <h5>Div Quantity <input id="divs_qt" type="number" min="1" max="20" step="1" value="1"></h5>
        <div id="yd"></div>
</div>

FIDDLE Demo

0
Girish 2 sep. 2014 a las 14:37

Eso se puede reducir a:

$("#divs_qt").change(function() {
    var $div = $('div[id^=div]').hide();
    $div.slice(0, this.value).show();
});

http://jsfiddle.net/9g5y3fa3/4/

O todos encadenados juntos:

$("#divs_qt").change(function() {
    $('div[id^=div]').hide().slice(0, this.value).show();
});
1
Nit 2 sep. 2014 a las 14:34