由Javascript生成的带有Radio Inputs的Wordpress Metabox(在Javascript备选

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

本文关键字：Javascript Metabox Wordpress 备选 Inputs Radio      更新时间：2024-01-05

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

在下面的代码中，我有两个无线电输入。它们是在Wordpress CMS的后期编辑页面中生成的，它们的值是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);
}

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

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

然后，当你在WordPress后期编辑页面上设置元框时，使用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_enque_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);
}
相关文章：