web-dev-qa-db-ja.com

JavaScriptでwp.customizeを使用してコントロール全体の選択を変更する

2つのカスタマイザコントロール "setting_category"と "setting_font"があるとしましょう。 "setting_category"の値を変更すると "setting_font"の選択を変更しようとしています。これが私がしていることです：

( function( $ ) {
    var api = wp.customize;

    api( 'setting_category', function( value ) {
        value.bind( function( to ) {
            var newChoices = {};
            // get new data from JSON using 'to' and populate the 'newChoices'

            api( 'setting_font' ).changeTheChoices( newChoices );
        } );
    } );
} )( jQuery );

JavaScriptでそれをどのように行うことができますか？どんなトリック？

theme-developmentajaxjavascripttheme-customizerjson
1
5ervant

これが私が見つけた解決策です、それはある場合には役に立つかもしれません：

parent.wp.customize.control( 'setting_category', function( control ) {
    control.setting.bind( function( to ) {
        var selectElem = parent.wp.customize.control( 'setting_font' ).container.find( 'select' );

        selectElem.empty();
        $.each( jsonData['items'], function( key, item ) {
            if ( item['category'] === to ) {
                var option = $( '<option></option>' )
                        .attr( "value", encodeURIComponent( item['family'] ) )
                        .text( item['family'] );
                selectElem.append( option );
            }
        } );
    } );
} );
0
5ervant

あなたは近いです。これはwp.customize.Settingのメソッドなので、changeTheChoices()をset()に置き換えるだけです。以下も参照してください。

wp.customize( 'setting_category', 'setting_font', function( categorySetting, fontSetting ) {
    categorySetting.bind( function( category ) {
        var newChoices = {};
        // get new data from JSON using 'category' and populate the 'newChoices'

        fontSetting.set( newChoices );
    });
});

ヒント：設定用のIDに "setting"を使用しないことをお勧めします。

1
Weston Ruter