0

機能に問題がありhide_fields()ます。すべての「row-layout-field」<div>-sを非表示にしてから、同じparent()parent()内にある特定のdivを.として表示しようとしてい<select>ます。

から選択した内容に応じて<select>、特定のフィールドが表示されます。

これらの行はいくつかありますが、問題は、行が 3 つある場合に、<select>-s のいずれかからオプションを選択すると、すべてのフィールドがすべて非表示になることです。

コードは以下に貼り付けます。

マークアップは、Wordpress 管理者が ACF を使用して作成したものなので、かなり複雑ですが、表示する必要がある場合は、http: //pastie.org/4467255で確認できます。

(function($) {

    // hide_fields / a small function to hide all the conditional fields
    function hide_fields() {
        $('#acf-content_repeater table tbody tr.row td div.row-layout-field:nth-child(1n+2)').hide();
    }

    // Document Ready
    $(document).ready(function() {

        // hide all fields
        hide_fields();

        // trigger change on the select field to show selected field
        $('#acf-content_repeater table tbody tr.row td div.row-layout-field select').trigger('change');

    });

    // Hero Type change
    $('#acf-content_repeater table tbody tr.row td div.row-layout-field select').live('change', function() {

        // vars
        var value = $(this).val();

        // hide all fields
        hide_fields();

        // show the selected field
        if( value == "image" ) {
            // console.log( $(this).parent().parent().find('div.row-layout-field:nth-child(2)') );
            $(this).parent().parent().find('div.row-layout-field:nth-child(2)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(3)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(4)').show();
        }
        else if( value == "video" ) {
            $(this).parent().parent().find('div.row-layout-field:nth-child(4)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(5)').show();
        }
        else if( value == "tweet" ) {
            $(this).parent().parent().find('div.row-layout-field:nth-child(5)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(6)').show();
        }
        else if( value == "statistic" ) {
            $(this).parent().parent().find('div.row-layout-field:nth-child(6)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(7)').show();
        }

    });

})(jQuery);

ご協力ありがとうございます。

編集：

私はこれで必要なものを達成することができました: http://pastie.org/4467732

おそらく最もエレガントではありませんが、機能します。

4

2 に答える 2

0

私は少しばかで、自分の質問に答えるのではなく、元の投稿に回答を追加しました...上記は次のとおりです。

私はこれで必要なものを達成することができました: http://pastie.org/4467732

おそらく最もエレガントではありませんが、機能します。

于 2012-09-05T02:39:49.147 に答える
0

親と検索を使用して、要素の親から特定の子を非表示にすることができます

  $(this).parent().find('.row-layout-field').hide();
于 2012-08-13T17:47:50.273 に答える