Question

我正在尝试更多地了解jQuery以及它是如何工作的。 In my last Question用户Zachary Kniebel帮我弄清楚如何根据'RADIO'表单显示/隐藏一些值，现在我修改了他的代码，我想用循环来改进它（可能是FOR循环，因为他向我建议）。其实我没有运气所以这是我的问题：

**

我忘了说我无法更改HTML，因为它是由wordpress Option框架自动生成的......

**

如何在不更改HTML部分的情况下为此功能使用LOOP？

For jsfiddle lovers here it is a working example with really long js CODE

JS

-

jQuery(document).ready(function ($) {
    $types = $('.of-radio');
    $types.change(function () {
        $this = $(this).val();
        if ($this == "0") {
            /* zone 1 */
            $('#section-custom_posts_name_s_n1').hide();
            $('#section-custom_posts_name_p_n1').hide();
            $('#section-custom_posts_name_i_n1').hide();
            $('#section-custom_posts_name_d_n1').hide();
            /* end zone 1 start zone 2*/
            $('#section-custom_posts_name_s_n2').hide();
            $('#section-custom_posts_name_p_n2').hide();
            $('#section-custom_posts_name_i_n2').hide();
            $('#section-custom_posts_name_d_n2').hide();
            /* end zone 2 start zone 3 */
            $('#section-custom_posts_name_s_n3').hide();
            $('#section-custom_posts_name_p_n3').hide();
            $('#section-custom_posts_name_i_n3').hide();
            $('#section-custom_posts_name_d_n3').hide();
            /* end zone 3 start zone 4 */
            $('#section-custom_posts_name_s_n4').hide();
            $('#section-custom_posts_name_p_n4').hide();
            $('#section-custom_posts_name_i_n4').hide();
            $('#section-custom_posts_name_d_n4').hide();
            /* end zone 4 start zone 5 */
            $('#section-custom_posts_name_s_n5').hide();
            $('#section-custom_posts_name_p_n5').hide();
            $('#section-custom_posts_name_i_n5').hide();            
            $('#section-custom_posts_name_d_n5').hide();
            /* end zone 5 */
        } else if ($this == "1") {
            /* start zone 1 */
            $('#section-custom_posts_name_s_n1').show();
            $('#section-custom_posts_name_p_n1').show();
            $('#section-custom_posts_name_i_n1').show();
            $('#section-custom_posts_name_d_n1').show();
            /* end zone 1 start zone 2 */
            $('#section-custom_posts_name_s_n2').hide();
            $('#section-custom_posts_name_p_n2').hide();
            $('#section-custom_posts_name_i_n2').hide();
            $('#section-custom_posts_name_d_n2').hide();
            /* end zone 2 start zone 3 */
            $('#section-custom_posts_name_s_n3').hide();
            $('#section-custom_posts_name_p_n3').hide();
            $('#section-custom_posts_name_i_n3').hide();
            $('#section-custom_posts_name_d_n3').hide();
            /* end zone 3 start zone 4 */
            $('#section-custom_posts_name_s_n4').hide();
            $('#section-custom_posts_name_p_n4').hide();
            $('#section-custom_posts_name_i_n4').hide();
            $('#section-custom_posts_name_d_n4').hide();
            /* end zone 4 start zone 5 */
            $('#section-custom_posts_name_s_n5').hide();
            $('#section-custom_posts_name_p_n5').hide();
            $('#section-custom_posts_name_i_n5').hide();            
            $('#section-custom_posts_name_d_n5').hide();
            /* end zone 5 */
        } else if ($this == "2") {
            /* start zone 1 */
            $('#section-custom_posts_name_s_n1').show();
            $('#section-custom_posts_name_p_n1').show();
            $('#section-custom_posts_name_i_n1').show();
            $('#section-custom_posts_name_d_n1').show();
            /* end zone 1 start zone 2 */
            $('#section-custom_posts_name_s_n2').show();
            $('#section-custom_posts_name_p_n2').show();
            $('#section-custom_posts_name_i_n2').show();
            $('#section-custom_posts_name_d_n2').show();
            /* end zone 2 start zone 3 */
            $('#section-custom_posts_name_s_n3').hide();
            $('#section-custom_posts_name_p_n3').hide();
            $('#section-custom_posts_name_i_n3').hide();
            $('#section-custom_posts_name_d_n3').hide();
            /* end zone 3 start zone 4 */
            $('#section-custom_posts_name_s_n4').hide();
            $('#section-custom_posts_name_p_n4').hide();
            $('#section-custom_posts_name_i_n4').hide();
            $('#section-custom_posts_name_d_n4').hide();
            /* end zone 4 start zone 5 */
            $('#section-custom_posts_name_s_n5').hide();
            $('#section-custom_posts_name_p_n5').hide();
            $('#section-custom_posts_name_i_n5').hide();
            $('#section-custom_posts_name_d_n4').hide();
            /* end zone 5 */
        } else if ($this == "3") {
            /*start zone 1 */
            $('#section-custom_posts_name_s_n1').show();
            $('#section-custom_posts_name_p_n1').show();
            $('#section-custom_posts_name_i_n1').show();
            $('#section-custom_posts_name_d_n1').show();
            /* end zone 1 start zone 2 */
            $('#section-custom_posts_name_s_n2').show();
            $('#section-custom_posts_name_p_n2').show();
            $('#section-custom_posts_name_i_n2').show();
            $('#section-custom_posts_name_d_n2').show();
            /* end zone 2 start zone 3 */
            $('#section-custom_posts_name_s_n3').show();
            $('#section-custom_posts_name_p_n3').show();
            $('#section-custom_posts_name_i_n3').show();
            $('#section-custom_posts_name_d_n3').show();
            /* end zone 3 start zone 4 */
            $('#section-custom_posts_name_s_n4').hide();
            $('#section-custom_posts_name_p_n4').hide();
            $('#section-custom_posts_name_i_n4').hide();
            $('#section-custom_posts_name_d_n4').hide();
            /* end zone 4 start zone 5 */
            $('#section-custom_posts_name_s_n5').hide();
            $('#section-custom_posts_name_p_n5').hide();
            $('#section-custom_posts_name_i_n5').hide();
            $('#section-custom_posts_name_d_n5').hide();
            /* end zone 5 */
        } else if ($this == "4") {
            /* start zone 1 */
            $('#section-custom_posts_name_s_n1').show();
            $('#section-custom_posts_name_p_n1').show();
            $('#section-custom_posts_name_i_n1').show();
            $('#section-custom_posts_name_d_n1').show();
            /* end zone 1 start zone 2 */
            $('#section-custom_posts_name_s_n2').show();
            $('#section-custom_posts_name_p_n2').show();
            $('#section-custom_posts_name_i_n2').show();
            $('#section-custom_posts_name_d_n2').show();
            /* end zone 2 start zone 3 */
            $('#section-custom_posts_name_s_n3').show();
            $('#section-custom_posts_name_p_n3').show();
            $('#section-custom_posts_name_i_n3').show();
            $('#section-custom_posts_name_d_n3').show();
            /* end zone 3 start zone 4 */
            $('#section-custom_posts_name_s_n4').show();
            $('#section-custom_posts_name_p_n4').show();
            $('#section-custom_posts_name_i_n4').show();
            $('#section-custom_posts_name_d_n4').show();
            /* end zone 4 start zone 5 */
            $('#section-custom_posts_name_s_n5').hide();
            $('#section-custom_posts_name_p_n5').hide();
            $('#section-custom_posts_name_i_n5').hide();
            $('#section-custom_posts_name_d_n5').hide();
            /* end zone 5 */
        } else if ($this == "5") {
            /* start zone 1 */
            $('#section-custom_posts_name_s_n1').show();
            $('#section-custom_posts_name_p_n1').show();
            $('#section-custom_posts_name_i_n1').show();
            $('#section-custom_posts_name_d_n1').show();
            /* end zone 1 start zone 2 */
            $('#section-custom_posts_name_s_n2').show();
            $('#section-custom_posts_name_p_n2').show();
            $('#section-custom_posts_name_i_n2').show();
            $('#section-custom_posts_name_d_n2').show();
            /* end zone 2 start zone 3 */
            $('#section-custom_posts_name_s_n3').show();
            $('#section-custom_posts_name_p_n3').show();
            $('#section-custom_posts_name_i_n3').show();
            $('#section-custom_posts_name_d_n3').show();
            /* end zone 3 start zone 4 */
            $('#section-custom_posts_name_s_n4').show();
            $('#section-custom_posts_name_p_n4').show();
            $('#section-custom_posts_name_i_n4').show();
            $('#section-custom_posts_name_d_n4').show();
            /* end zone 4 start zone 5 */
            $('#section-custom_posts_name_s_n5').show();
            $('#section-custom_posts_name_p_n5').show();
            $('#section-custom_posts_name_i_n5').show();
            $('#section-custom_posts_name_d_n5').show();
            /* end zone 5 */
        }
    });
});

Answer 1

要简化的第一件事是在每组相关div之间放置另一个div。

<div id="section-custom_posts_name_all_n1">
    ... existing set of 4 divs for s, n, i and p and related text for n1 ...
</div>

然后代替

$('#section-custom_posts_name_s_n1').hide();
$('#section-custom_posts_name_p_n1').hide();
$('#section-custom_posts_name_i_n1').hide();
$('#section-custom_posts_name_d_n1').hide();

你刚才说：

$('#section-custom_posts_name_all_n1').hide();

第二件事简化的事情是你可以用连接来构建字符串：

for (int i=1; i <= last  ; ++i) {
    $("#section-custom_posts_name_all_n" + i).hide();
}

这会将所有这些隐藏到由last定义的点。

第三件事就是把它转过来这样做（再加上一个循环）：

$this = parseInt($(this).val())
for (var i=1; i < 6 ; ++i) {
            fixDisplay($('#section-custom_posts_name_s_n'+i), $this, i);
            fixDisplay($('#section-custom_posts_name_p_n'+i), $this, i);
            fixDisplay($('#section-custom_posts_name_i_n'+i), $this, i);
            fixDisplay($('#section-custom_posts_name_d_n'+i), $this, i);
}

function fixDisplay($el, val, section) {
    if (section <= val) {
        $el.show();
    } else {
        $el.hide();
    }
};

Answer 2

您可能是loop，而不是cicle。

但是你甚至不需要循环，你可以处理CSS中的所有内容，只需在元素上使用class名称，并将此代码减少为：

HTML：

<div id="myParentDiv" class="show_0">
    <div class="block_1">...</div>
    <div class="block_2">...</div>
    <div class="block_3">...</div>
    <div class="block_4">...</div>
    <div class="block_5">...</div>
</div>

JS：

jQuery(document).ready(function ($) {
    $types = $('.of-radio');
    $types.change(function () {
        $this = $(this).val();

        $('#myParentDiv').removeClass('show_0 show_1 show_2 show_3 show_4 show_5');

        if ($this == "0") {
            $('#myParentDiv').addClass('show_0');
        } else if ($this == "1") {
            $('#myParentDiv').addClass('show_1');
        } else if ($this == "2") {
            $('#myParentDiv').addClass('show_2');
        } else if ($this == "3") {
            $('#myParentDiv').addClass('show_3');
        } else if ($this == "4") {
            $('#myParentDiv').addClass('show_4');
        } else if ($this == "5") {
            $('#myParentDiv').addClass('show_5');
        }
    });
});

CSS：

.block_1,
.block_2,
.block_3,
.block_4,
.block_5 {
    display: none;
}

.show_1 .block_1 {
    display: block;
}
.show_2 .block_1,
.show_2 .block_2 {
    display: block;
}
.show_3 .block_1,
.show_3 .block_2,
.show_3 .block_3 {
    display: block;
}
.show_4 .block_1,
.show_4 .block_2,
.show_4 .block_3,
.show_4 .block_4 {
    display: block;
}
.show_5 .block_1,
.show_5 .block_2,
.show_5 .block_3,
.show_5 .block_4,
.show_5 .block_5 {
    display: block;
}

Answer 3

我不确定这是多么有效，但这是我能够将代码缩短到最短的时间。我不确定您是在寻找效率还是最短路。像其他人一样，我在jQuery中使用了循环和链接。

jQuery(document).ready(function ($) {
    $types = $('.of-radio');
    $types.change(function () {
       /* $(".section").not("#section-how_many_custom_posts").hide();*/
        $this = $(this).val();
        $('[id^="section-custom_posts_name_"]').hide().each(function(i, val)
                  {
                      if($this > 0 && i < ($this * 4) && $(val).attr('id').replace( /^\D+/g, '') <= $this)
                          $(val).show();
                  });
    });
});

JSFiddle

LOOP一个jquery函数怎么会更好？

我忘了说我无法更改HTML，因为它是由wordpress Option框架自动生成的......

3 个答案: