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

时间:2019-07-11 10:39:07

标签: javascript jquery html css input

我遵循了这个问题,将所有输入值都变成一个输入值,并且工作正常: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 }

Field动态主体类保存在Wordprsss的自定义选项页面中。 现在,在Wordpress中将表单保存为Inputs值后的问题为空,因为在数据库中仅保存了“ 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,以用于动态主题样式。

1 个答案:

答案 0 :(得分:0)

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

ggplot(dt, aes(x = categ, y = value)) +
    geom_bar(data = dt[value < 0], stat = "identity", fill = "darkred") +
    geom_bar(data = dt[value >= 0], stat = "identity", fill = "darkblue") +
    coord_flip() +
    theme_bw()
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]);