使用 jQuery 从一个字符串输入中获取动态输入值答案

【问题标题】：Get dynamic inputs value from one string input with jQuery使用 jQuery 从一个字符串输入中获取动态输入值
【发布时间】：2019-07-11 10:39:07
【问题描述】：

我已按照此问题将所有输入值转换为一个输入值，并且工作正常：Clone multiple input values into one input field

工作小提琴：https://jsfiddle.net/yt4qeo6k/

jQuery(document).ready(function($){
  $(function(){
      $('.copy').on('keyup blur', function(){        
          var bgcolor = $(".bgcolor").val();
          var textcolor = $(".textcolor").val();
          var padding = $(".padding").val();
          var linkcolor = $(".linkcolor").val(); 

          $('.full').val( '#masthead {background-color:' + bgcolor + ';color:' + textcolor + ';padding:' + padding + 'px;} #masthead a{color:' + linkcolor + ';}');

       }).blur();
  });
});

// Body Classes
function setting_dynamic_body_classes() { ?>
<input type="text" name="dynamic-bg-color" data-alpha="true" data-default-color="" class="bgcolor copy color-picker" value="">
<input type="text" name="dynamic-text-color" data-alpha="true" data-default-color="" class="textcolor copy color-picker">
<input type="range" name="dynamic-padding" class="rangeslider padding copy"  value="" step="1" min="0" max="100">
<input type="text" name="dynamic-link-color"  data-alpha="true" data-default-color="" class="linkcolor copy color-picker">
<input type="text" name="dynamic-body-classes" id="dynamic-body-classes" value="" data-alpha="true" data-default-color="" class="full" style="width:100%;"/><br>
<strong>current Value: </strong><?php echo get_option('dynamic-body-classes'); ?>
<?php }

字段 dynamic-body-classes 保存在 Wordprss 的自定义选项页面中。现在在 Wordpress 中保存表单后的问题 Inputs 值为空，因为只有字段“dynamic-body-classes”保存在数据库中。

“dynamic-body-classes”的值如下所示：

#masthead {background-color:#1e73be;color:#dd9933;padding:95px;} #masthead a{color:#81d742;}

如何根据值“dynamic-body-classes”添加每个字段的值（dynamic-bg-color、dynamic-bg-color、dynamic-padding、dynamic-link-color）？

before changing the values of each field

after changing the values of each field

After Saving the form the current value is showing up as expected but the dynamic field are empty

我不确定我这样做的方式是否正确，但我需要添加许多动态字段，它们的值将保存为一个字段中的 css 以实现动态主题样式。

【问题讨论】：

对于如何保存或更新字段的代码在哪里了解真的不够
@charlietfl 谢谢，我已经编辑了这个问题。它保存在 wordpress 的自定义主题选项页面中。请看附件图片。
建议在保存过程中使用更结构化的对象是重点

标签： javascript jquery html css input

【解决方案1】：

您可以使用正则表达式从保存的字符串中提取值，这是一个示例：

const full = $("#currentValue").text();
const values = full.match(/#masthead {background-color:([^;]+);color:([^;]+);padding:([^;]+)px;} #masthead a{color:([^;]+);}/);

$(".full").val(full);
$(".bgcolor").val(values[1]);
$(".textcolor").val(values[2]);
$(".padding").val(values[3]);
$(".linkcolor").val(values[4]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="dynamic-bg-color" data-alpha="true" data-default-color="" class="bgcolor copy color-picker" value="">
<input type="text" name="dynamic-text-color" data-alpha="true" data-default-color="" class="textcolor copy color-picker">
<input type="range" name="dynamic-padding" class="rangeslider padding copy"  value="" step="1" min="0" max="100">
<input type="text" name="dynamic-link-color"  data-alpha="true" data-default-color="" class="linkcolor copy color-picker">
<input type="text" name="dynamic-body-classes" id="dynamic-body-classes" value="" data-alpha="true" data-default-color="" class="full" style="width:100%;"/><br>
<strong>current Value: </strong><span id="currentValue">#masthead {background-color:#1e73be;color:#dd9933;padding:95px;} #masthead a{color:#81d742;}</span>

【讨论】：