0

jQuery とその仕組みについてもう少し理解しようとしています。 私の最後の質問ユーザー Zachary Kniebel は、「RADIO」フォームに基づいていくつかの値を表示/非表示にする方法を理解するのを手伝ってくれました。今、私は彼のコードを変更し、ループを使用してさらに改善したいと思います (おそらく彼が提案したように FOR ループ)私に）。実際には運がなかったので、ここに私の質問があります：

**

HTML は wordpress Option フレームワークによって自動的に生成されるため、変更できないことを忘れていました...

**

HTML部分を変更せずに、この関数にLOOPを使用するにはどうすればよいですか?

ここの jsfiddle 愛好家にとっては、非常に長い 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 */
        }
    });
});
4

3 に答える 3

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

単純化する2 番目のことは、連結を使用して文字列を構築できることです。

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

これにより、 で定義されたポイントまですべてが非表示になりますlast。

3 番目のことは、方向転換してこのようにすることです (さらにループを使用します)。

$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();
    }
};
于 2013-04-15T23:15:49.780 に答える
0

おそらく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;
}
于 2013-04-15T23:15:56.430 に答える
0

これがどれほど効率的かはわかりませんが、これはコードを書き留めることができた最短のものです。効率を求めているのか、最短の方法を求めているのかわかりません。他のみんなと同じように、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

于 2013-04-15T23:54:18.803 に答える