jquery - 循环一个 jquery 函数会更好吗？

Question

我试图更多地了解 jQuery 以及它是如何工作的。在我的上一个问题中，用户 Zachary Kniebel 帮助我弄清楚如何根据“RADIO”表单显示/隐藏一些值，现在我修改了他的代码，我想使用循环来改进它（也许是他建议的 FOR 循环大部头书）。实际上我没有运气所以这是我的问题：

**

我忘了说我不能更改 HTML，因为它是由 wordpress 选项框架自动生成的......

**

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

对于 jsfiddle 爱好者来说，这是一个非常长的 js 代码的工作示例

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

score 1 · Accepted Answer

首先要简化的是在每组相关的 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();
    }
};

score 0 · Accepted Answer

你可能的意思是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;
}

score 0 · Accepted Answer

我不确定这有多有效，但这是我能够得到代码的最短时间。我不确定您是否正在寻找效率或最短的方法。像其他人一样，我使用 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

jquery - 循环一个 jquery 函数会更好吗？

我忘了说我不能更改 HTML，因为它是由 wordpress 选项框架自动生成的......

3 回答 3

Related

Reference