Получить значение динамического ввода из одного строкового ввода с помощью jQuery

Question

Я следовал этому Вопросу, чтобы получить все входные значения в одном входном значении, и он работает нормально: Клонировать несколько входных значений в одно поле ввода

Рабочая скрипка: 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 сохраняется на странице пользовательских параметров в Wordprsss. Теперь проблема после сохранения формы в Wordpress в значении Inputs пуста, поскольку в базе данных было сохранено только поле «dynamic-body-classes».

и значение «dynamic-body-classes», например, будет выглядеть следующим образом:

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

Как добавить значение каждого поля (dynamic-bg-color, dynamic-bg-color, dynamic-padding, dynamic-link-color) на основе значения "dynamic-body-classes"?

до изменения значений каждого поля

после изменения значений каждого поля

После сохранения формы текущее значение отображается, как и ожидалось, но динамическое поле пусто

Я не уверен, что делаю это правильно, но мне нужно добавить много динамических полей, чтобы их значение сохранялось как css, в одном поле для динамического оформления тем.

Answer 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>