循环jQuery Switch案例

时间：2014-09-02 14:13:35

标签： javascript jquery loops while-loop

我目前正在使用以下代码。

它运行得很好，但是jQuery脚本对我来说似乎是一个巨大的代码浪费。但是，我不确定如何正确使用while循环来适应这种情况 有效地做到这一点的最佳方法是什么？

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"});
    }
});

完成以下工作代码：http://jsfiddle.net/9g5y3fa3/

5 个答案:

答案 0 :(得分：2)

你的方法存在缺陷。应用程序开发中一个非常重要的原则是＆＃34; Don't Repeat Yourself＆＃34;或简称为DRY。

不是一遍又一遍地重复20个项目，而是使用单个模板，然后根据需要多次渲染该模板。 Girish has already given you使用定制模板系统的示例，但我建议使用比HandlebarsJS更强大的功能。当您意识到模板中需要更多细微差别时，它会为您提供更多的成长空间。

您甚至不需要下载或安装任何内容 - 只需使用Handlebars CDN（通过<script src=""></script>标记包含handlebars.js和handlebars.runtime.js）。

您的代码最终会看起来像这样：

HTML

单个HTML模板。非常方便，如果您发现需要将info06添加到表单中。

<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 );
});

那就是它！

请参阅此处的工作示例：http://jsfiddle.net/5q1k5v8d/7/

答案 1 :(得分：1)

可以简化为：

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

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

或所有链接在一起：

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

答案 2 :(得分：0)

尝试简单的代码

$("#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"
        });
    }
});
使用模板

更新代码作为评论，并根据计数器附加element

<强>脚本 

$("#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

答案 3 :(得分：0)

基于Anoop的答案，但这使用了＆＃34;每个＆＃34;在每个div上创建一个循环的方法，根据它们的索引是否与所选值一样高来显示或隐藏它们。

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

FIDDLE Demo

答案 4 :(得分：-1)

我已经编辑了Girish的一些答案，即使在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"});
        }
    }
});
相关问题
最新问题