Javascript 生成的具有无线电输入的 Wordpress Metabox（Javascript 中的 checked() wordpress 函数替代）

Question

我在这个和其他论坛上搜索答案，但我仍然面临这个问题，没有任何进展。

在下面的代码中，我有两个无线电输入。它们在 Wordpress CMS 的 post 编辑页面中生成，它们的值是 post_meta 值。一切正常，但因为它是 jQuery，我无法使用函数 checked()，所以在我点击发布后，它们显示为未选中。有办法解决这个问题吗？

function addRow(image_url){

    if(typeof(image_url)==='undefined') image_url = "";
    itemsCount+=1;

    var emptyRowTemplate = '<div id=row-'+itemsCount+'> <input style=\'width:70%\' id=img-'+itemsCount+' type=\'text\' name=\'miu_images['+itemsCount+']\' value=\''+image_url+'\' />'
    +'<input type=\'button\' href=\'#\' class=\'Image_button button\' id=\'Image_button-'+itemsCount+'\' value=\'Upload\'>'
    +'<input class="miu-remove button" type=\'button\' value=\'Remove\' id=\'remove-'+itemsCount+'\' /><br>'
    
    +'<label for="left-column'+itemsCount+'">Lewa kolumna</label><input name=\'float['+itemsCount+']\' type=\'radio\' value=\'left-column\' id=\'left-column'+itemsCount+'\' />'
    +'<label for="right-column'+itemsCount+'">Prawa kolumna</label><input name=\'float['+itemsCount+']\' type=\'radio\' value=\'right-column\' id=\'right-column'+itemsCount+'\' />'

    '</div>';
    jQuery('#miu_images').append(emptyRowTemplate);
}

Answer 1

关键是在加载脚本时将现有值传递给脚本。

当您使用 wp_enqueue_script 对脚本进行排队时，请将 $in_footer 参数设置为 true，以便脚本在页脚中加载。

然后，当您在 WordPress post 编辑页面上设置元框时，使用 wp_localize_script 将元值传递给您的脚本。例如：

// Get post meta values for float in array $float
$data = array();
for ($i = 1; $i <= count($float); $i++) {
    $data['float' . $i] = $float[$i - 1];
}
wp_localize_script('some_handle', 'floatdata', $data);

其中 'some_handle' 是您在 wp_enqueue_script 中使用的句柄。

这将创建一个 Javascript 形式的变量：

<script>
var floatdata = {
    'float1': value of float1,
    'float2': value of float2,
    ...
};
</script>

然后，当您的脚本创建行时，它可以检查 floatdata.floatn 的值并相应地设置 'checked="checked"'。

因此，例如，

function addRow(image_url){

    if(typeof(image_url)==='undefined') image_url = "";
    itemsCount+=1;
    var radiovalue = floatdata['float'+itemsCount];

    var emptyRowTemplate = '<div id=row-'+itemsCount+'> <input style=\'width:70%\' id=img-'+itemsCount+' type=\'text\' name=\'miu_images['+itemsCount+']\' value=\''+image_url+'\' />'
    +'<input type=\'button\' href=\'#\' class=\'Image_button button\' id=\'Image_button-'+itemsCount+'\' value=\'Upload\'>'
    +'<input class="miu-remove button" type=\'button\' value=\'Remove\' id=\'remove-'+itemsCount+'\' /><br>'

    +'<label for="left-column'+itemsCount+'">Lewa kolumna</label><input name=\'float['+itemsCount+']\' type=\'radio\' value=\'left-column\' id=\'left-column'+itemsCount+'\'' + (radiovalue == 'left-column' ? ' checked="checked"' : '') + ' />'
    +'<label for="right-column'+itemsCount+'">Prawa kolumna</label><input name=\'float['+itemsCount+']\' type=\'radio\' value=\'right-column\' id=\'right-column'+itemsCount+'\'' + (radiovalue == 'right-column' ? ' checked="checked"' : '') + ' />'

    '</div>';
    jQuery('#miu_images').append(emptyRowTemplate);
}

Javascript 生成的具有无线电输入的 Wordpress Metabox（Javascript 中的 checked() wordpress 函数替代）

Wordpress Metabox with Radio Inputs generated by Javascript ( checked() wordpress function in Javascript alternative)

javascript

php

wordpress

jquery