javascript - 将多个相似的 jQuery 函数转换为一个函数 - 动态

Question

我有一个 jQuery 函数，它获取所有字段的值并将它们添加到一个字段。

工作 JSfiddle:https://jsfiddle.net/Nashza/cLpa9nob/8/

现在您可以看到在 jQuery 代码中有两个具有不同 CSS 结构的字段。

因为我有 jQuery 的基本知识，所以我不确定如何将 jQuery 代码转换为可以处理多个输入的单个函数，而输入中保存的 CSS 值是动态的，并且每个输入都有不同的结构。

例如，第一个输入“glass-body-css”将具有以下结构:

body {background-color:#f7f7f7;color:#350c0c;padding:0px;} a{color:#05b58c;} a:hover{color:#099b8c;}

而“glass-header-css”将具有以下结构:

#glassTopHeader {background-color:#0e0093;color:#f7bf18;padding:0px;} #glassTopHeader a{color:#f99339;} #glassTopHeader a:hover{color:#ff0a0a;}

在不为每个输入复制 jQuery 代码的情况下制作干净的 1 jQuery 代码的最佳解决方案是什么

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jQuery(document).ready(function($){
$(function(){
$('.copy').on('change keyup', function(){ 
var bgcolor = $(".bgcolor_body").val();
var textcolor = $(".textcolor_body").val();
var padding = $(".padding_body").val();
var linkcolor = $(".linkcolor_body").val();
var linkhovercolor = $(".linkhovercolor_body").val(); 

$('.full_body').val( 'body {background-color:' + bgcolor + ';color:' + textcolor + ';padding:' + padding + 'px;} a{color:' + linkcolor + ';} a:hover{color:' + linkhovercolor + ';}');

}).change();
});

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

if (values) {
$(".full_body").val(full);
$(".bgcolor_body").val(values[1]);
$(".textcolor_body").val(values[2]);
$(".padding_body").val(values[3]);
$(".linkcolor_body").val(values[4]);
$(".linkhovercolor_body").val(values[5]);

}
});


jQuery(document).ready(function($){
$(function(){
$('.copy').on('change keyup', function(){ 
var bgcolor = $(".bgcolor_head").val();
var textcolor = $(".textcolor_head").val();
var padding = $(".padding_head").val();
var linkcolor = $(".linkcolor_head").val(); 
var linkhovercolor = $(".linkhovercolor_head").val(); 

$('.full_head').val( '#glassTopHeader {background-color:' + bgcolor + ';color:' + textcolor + ';padding:' + padding + 'px;} #glassTopHeader a{color:' + linkcolor + ';} #glassTopHeader a:hover{color:' + linkhovercolor + ';}');

}).change();
});


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

if (values) {
$(".full_head").val(full);
$(".bgcolor_head").val(values[1]);
$(".textcolor_head").val(values[2]);
$(".padding_head").val(values[3]);
$(".linkcolor_head").val(values[4]);
$(".linkhovercolor_head").val(values[5]);

}
});

<input type="text" class="bgcolor_body copy color-picker" value="">
<input type="text" class="textcolor_body copy color-picker">
<input type="text" class="linkcolor_body copy color-picker">
<input type="text" class="linkhovercolor_body copy color-picker">
<input type="range" class="padding_body copy rangeslider"  value="" step="1" min="0" max="100">
<input type="text" name="glass-body-css" id="glass-body-css" value="" data-alpha="true" data-default-color="" class="full_body" style="width:100%;"/><br>
<strong>current Value: </strong><span id="currentValue_body">body {background-color:#f7f7f7;color:#350c0c;padding:0px;} a{color:#05b58c;} a:hover{color:#099b8c;}</span>

<input type="text" name="glass-top-header-color" id="glass-top-header-color" data-alpha="true" data-default-color="" class="bgcolor_head copy color-picker" value="">
<input type="text" name="glass-top-header-text-color" id="glass-top-header-text-color" data-alpha="true" data-default-color="" class="textcolor_head copy color-picker">
<input type="text" name="glass-top-header-link-color" id="glass-top-header-link-color"  data-alpha="true" data-default-color="" class="linkcolor_head copy color-picker">
<input type="text" name="glass-top-header-link-hover-color" id="glass-top-header-link-hover-color"  data-alpha="true" data-default-color="" class="linkhovercolor_head copy color-picker">
<input type="range" name="glass-padding" class="padding_head copy rangeslider"  value="" step="1" min="0" max="100">
<input type="text" name="glass-header-css" id="glass-header-css" value="" data-alpha="true" data-default-color="" class="full_head" style="width:100%;"/><br>
<strong>current Value: </strong><span id="currentValue_head">#glassTopHeader {background-color:#0e0093;color:#f7bf18;padding:0px;} #glassTopHeader a{color:#f99339;} #glassTopHeader a:hover{color:#ff0a0a;}</span>

Answer 1

以下应该会给您一个良好的开端。这里发生了很多事情，所以它可能并不完美

对于初学者来说，将每个集合包装在一个容器中，并使用容器上的数据属性来存储每个集合中共有的变量

在这种情况下，我能够添加一个type 和selector

type 然后在各种 jQuery 选择器以及存储适当正则表达式的新对象 matches 中使用。 选择器用于打印样式规则

然后在事件处理程序中查找父容器以从数据属性中获取变量

var matches = {
  body: /body {background-color:([^;]+);color:([^;]+);padding:([^;]+)px;} a{color:([^;]+);} a:hover{color:([^;]+);}/,
  head: /#glassTopHeader {background-color:([^;]+);color:([^;]+);padding:([^;]+)px;} #glassTopHeader a{color:([^;]+);} #glassTopHeader a:hover{color:([^;]+);}/

}

jQuery(function($) {
  $('.copy').on('change keyup', function() {

    var $row = $(this).closest('.input-row'),
      type = $row.data('type'),
      selector = $row.data('selector')

    var bgcolor = $(".bgcolor_" + type).val();
    var textcolor = $(".textcolor_" + type).val();
    var padding = $(".padding_" + type).val();
    var linkcolor = $(".linkcolor_" + type).val();
    var linkhovercolor = $(".linkhovercolor_" + type).val();

    $('.full_' + type).val(selector + '{background-color:' + bgcolor + ';color:' + textcolor + ';padding:' + padding + 'px;} a{color:' + linkcolor + ';} a:hover{color:' + linkhovercolor + ';}');

  }).change();

// loop over each instance to set values 
  $('.input-row').each(function() {
    var type = $(this).data('type')
    const full = $("#currentValue_" + type).text();
    // use the type from data attribute to get regex
    const values = full.match(matches[type]);

    if (values) {
      $(".full_" + type).val(full);
      $(".bgcolor_" + type).val(values[1]);
      $(".textcolor_" + type).val(values[2]);
      $(".padding_" + type).val(values[3]);
      $(".linkcolor_" + type).val(values[4]);
      $(".linkhovercolor_" + type).val(values[5]);

    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-row" data-type="body" data-selector="body">

  <input type="text" class="bgcolor_body copy color-picker" value="">
  <input type="text" class="textcolor_body copy color-picker">
  <input type="text" class="linkcolor_body copy color-picker">
  <input type="text" class="linkhovercolor_body copy color-picker">
  <input type="range" class="padding_body copy rangeslider" value="" step="1" min="0" max="100">
  <input type="text" name="glass-body-css" id="glass-body-css" value="" data-alpha="true" data-default-color="" class="full_body" style="width:100%;" /><br>
  <strong>current Value: </strong><span id="currentValue_body">body {background-color:#f7f7f7;color:#350c0c;padding:0px;} a{color:#05b58c;} a:hover{color:#099b8c;}</span>
</div>

<div class="input-row" data-type="head" data-selector="#glassTopHeader">
  <input type="text" name="glass-top-header-color" id="glass-top-header-color" data-alpha="true" data-default-color="" class="bgcolor_head copy color-picker" value="">
  <input type="text" name="glass-top-header-text-color" id="glass-top-header-text-color" data-alpha="true" data-default-color="" class="textcolor_head copy color-picker">
  <input type="text" name="glass-top-header-link-color" id="glass-top-header-link-color" data-alpha="true" data-default-color="" class="linkcolor_head copy color-picker">
  <input type="text" name="glass-top-header-link-hover-color" id="glass-top-header-link-hover-color" data-alpha="true" data-default-color="" class="linkhovercolor_head copy color-picker">
  <input type="range" name="glass-padding" class="padding_head copy rangeslider" value="" step="1" min="0" max="100">
  <input type="text" name="glass-header-css" id="glass-header-css" value="" data-alpha="true" data-default-color="" class="full_head" style="width:100%;" /><br>
  <strong>current Value: </strong><span id="currentValue_head">#glassTopHeader {background-color:#0e0093;color:#f7bf18;padding:0px;} #glassTopHeader a{color:#f99339;} #glassTopHeader a:hover{color:#ff0a0a;}</span>

</div>