WordPress定制器值绑定中的动态ID

时间:2017-05-24 作者:Konker

我正在尝试创建基于动态ID的Wordpress自定义程序绑定,如下所示

for (var i=0; i < myarray.length; i++) {
    wp.customize( \'custom_width_\'+ myarray[i], function( value ) {
        value.bind( function( to ) {
            $( \'#\'+myarray[i] ).css( \'min-width\', to );
        });
    });     
}
代码是我从2017主题(customize preview.js)中窃取的东西,然后封装在一个循环中

问题是myarray[]在wp中被湮没。自定义()

Javascript专家如果知道我花了几个小时试图解决这个问题,一定会觉得很有趣。

我知道我可以。。。(kludge alert)将ID临时存储在DOM中,但无疑有更好的方法。

1 个回复
最合适的回答,由SO网友:Radoslav Georgiev 整理而成

您遇到的问题是由于您正在使用相同的i 代码段完整范围内的变量。

最初,您将变量与“custom\\u width\\u0”连接为字符串,这是正确的。在连接时i 具有正确的值,这意味着您需要的设置ID已正确生成。

循环完成后,i 包含数组中最后一个元素的索引,这正是让您困惑的地方,因为\'#\'+myarray[i] 将始终指向数组中的最后一个元素。原因是自定义程序设置更改的回调是异步的。这意味着,即使函数看起来(物理上)在循环中,它实际上也不是按相同的顺序执行的。

为了避免这个问题,您需要为变量声明一个不同的作用域,这样它就不会被循环改变。最简单的方法是通过一个新的匿名函数引入作用域,如下所示:

for (var i=0; i < myarray.length; i++) {
    (function( i ) {
        wp.customize( \'custom_width_\'+ myarray[i], function( value ) {
            value.bind( function( to ) {
                $( \'#\'+myarray[i] ).css( \'min-width\', to );
            });
        });     
    })( i );
}
i 不是对象,当您将其用作函数的参数时,它的值将被复制,而不是作为引用提供,因此允许您修改原始值,而不影响克隆/复制。

使用jQuery的each 循环方法:

$.each( myarray, function( i, id ) {
    wp.customize( \'custom_width_\' + id, function( setting ) {
        setting.bind( function( value ) {
            $( \'#\' + id ).css( \'min-width\', value );
        });
    });
});
我希望这能解决你的问题并回答你的问题。

结束

相关推荐