使用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 } 

Field動態實體類保存在Wordprsss的自定義選項頁中。 現在，在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）？

更改每個字段的值之前

更改每個字段的值后

保存表單后，當前值將按預期顯示，但動態字段為空

我不確定我是否以正確的方式執行此操作，但是我需要添加許多動態字段，這些字段的值將被保存為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>