根据输入属性自动构建选择器 [英] Build a selector automatically from inputs attributes

问题描述

我正在开发一种类似于网站生成器的生成器，在该生成器中，我从输入字段的name属性中获取值并将其发送给编辑器.我不知道如何编写代码并使代码更简洁.

I'm developing a generator something like a website builder where I am fetching the values from the name attributes of inputs fields and sending that to the editor. I don't know how to write the code and make it more clean.

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个输入字段又有更多字段怎么办?我想像这样压缩代码.

The above code is working fine but what if i have more fields in another case which has more than 30 input fields. I want to make the code compressed like this.

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

或者还有其他更好的方法可以处理它.

Or is there any more better way it can be handled.

已更新

现在更新了代码的首字下沉和图标可以正常工作，但是Google字体案例显示了一个问题，因为输入中没有存储默认值，因此它无法从复选框中获取值.

Updated the code now dropcap and icons works fine but the google font case shows a problem that it don't take the values from the checkbox as there are no default values stored in input.

        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字体中，简码具有结尾元素，并且其中包含文本，并且显示未定义.如何从中分离出文本属性或任何属性?

In Google font the shortcode has an ending element and the text inside in it and it shows undefined. How do i separate the text attribute or any attribute from that?

推荐答案

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

You can list the attribute names in an array and loop through them:

    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;

这篇关于根据输入属性自动构建选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！