javascript - 根据输入属性自动构建选择器

Question

我正在开发一个类似于网站构建器的生成器，我从输入字段的名称属性中获取值并将其发送到编辑器。我不知道如何编写代码并使其更干净。

case 'icons':
  var style = jQuery('[name="icons_icon"]').val();
  var size = jQuery('[name="icons_size"]').val();
  var color = jQuery('[name="icons_color"]').val();
  if (style !== '') {
    style = ' style="' + style + '"';
  }
  if (size !== '') {
    size = '  size="' + size + '"';
  }
  if (color !== '') {
    color = ' color="' + color + '"';
  }

  return '\n[icons' + style + size + color + ']\n';
break;
    case 'googlefont':
        var font    = jQuery('[name="googlefont_font"]').val();
        var size    = jQuery('[name="googlefont_size"]').val();
        var margin  = jQuery('[name="googlefont_margin"]').val();
        var text    = jQuery('[name="googlefont_text"]').val();
        var weight  = jQuery('[name="googlefont_weight"]').val();
        var extend  = jQuery('[name="googlefont_extend"]').val();
       // fontstyle is a checkbox
        var fontstyle   = jQuery('[name="googlefont_font_style"]');
        var color   = jQuery('[name="googlefont_color"]').val();

        if ( font )     { font = ' font="' + font + '"'; }
        if ( size )     { size = ' size="' + size + '"'; }
        if ( margin )   { margin = ' margin="' + margin + '"'; }
        if( weight )    { weight = ' weight="' + weight + '"'; }
        if( extend )    { extend = ' extend="' + extend + '"'; }
        if ( text )     { text = '' + text + ''; }
        if ( color )    { color = ' color="' + color + '"'; }
        if (fontstyle.is(':checked')) {
            fontstyle = ' fontstyle="true"';
        } else {
            fontstyle = ' fontstyle="false"';
        }

        return '[googlefont' + font + size + margin + weight + color + extend + fontstyle + ']' + text + '[/googlefont]';
        break;
    case 'drop cap':
       // type is a select element with the values
        var type            = jQuery('[name="dropcap_type"]').val();
        var text            = jQuery('[name="dropcap_text"]').val();
        var text_color      = jQuery('[name="dropcap_textcolor"]').val();
        var bgcolor         = jQuery('[name="dropcap_bgcolor"]').val();
        var droptype        = jQuery('#dropcap_type').val();

        if ( type )         { type = ' type="' + type + '"'; }
        if ( text )         { text = ' letter="' + text + '"'; }
        if ( text_color )   { text_color = ' text_color="' + text_color + '"'; }
        if ( bgcolor )      { bgcolor = ' bgcolor="' + bgcolor + '"'; }

        if(droptype == 'dropcap3'){
            return '[dropcap'+ type + text_color + text +']';
        }else{
            return '[dropcap'+ type + bgcolor + text_color + text +']';
        }
        break;

上面的代码工作正常，但是如果我在另一个有超过 30 个输入字段的情况下有更多字段怎么办？我想让代码像这样压缩。

case 'icons':
  var style,size,color;
  if ( var )  { var = ' var="' + getvalue + '"'; }
  return '\n[icons' + style + size + color + ']\n';
break;

或者有没有更好的处理方式。

已更新

更新了代码，现在 dropcap 和图标工作正常，但 google 字体大小写显示一个问题，它不从复选框中获取值，因为输入中没有存储默认值。

        case 'dropcap':
            var dropcapAttributes = ['type', 'text', 'textcolor','bgcolor'],
                ret = '', value;

            jQuery.each(dropcapAttributes , function (id, attrib) {
                value = jQuery('[name="dropcap_' + attrib + '"]').val();
                ret += ' ' + attrib + '="' + value + '"';
            });

            return '\n[dropcap' + ret + ']\n';
        break;
        // G O O G L E   F O N T
        //--------------------------------------------------------
    case 'googlefont':

        var googlefontAttributes = ['font', 'size', 'margin','text','weight','extend','font_style','color'],
            ret = '', value;

        jQuery.each(googlefontAttributes , function (id, attrib) {
            value = jQuery('[name="googlefont_' + attrib + '"]').val();
            ret += ' ' + attrib + '="' + value + '"';
        });

        return '\n[googlefont' + ret + ']' + text + '[/googlefont]\n';
        break;
    case 'icons':
         var iconAttributes = ['style', 'size', 'color'],
             ret = '', value;

         jQuery.each(iconAttributes , function (id, attrib) {
             value = jQuery('[name="icons_' + attrib + '"]').val();
             if(value !== '') {
               ret += ' ' + attrib + '="' + value + '"';
             }
         });

         return '\n[icons' + ret + ']\n';
         break;

在 Google 字体中，短代码有一个结束元素和其中的文本，并且显示未定义。如何将文本属性或任何属性与其分开？

Answer 1

您可以在数组中列出属性名称并循环遍历它们:

    case 'icons':
        var iconAttributes = ['style', 'size', 'color'],
            ret = '', value;

        $.each(iconAttributes , function (id, attrib) {
            value = jQuery('[name="icons_' + attrib + '"]').val();
            if(value !== '') {
              ret += ' ' + attrib + '="' + value + '"';
            }
        });

        return '\n[icons' + ret + ']\n';
        break;