从选定的输入中获取值并返回一个简码 [英] Get values from the selected inputs and returns a shortcode

问题描述

我有jQuery 100+的情况，下面是我要以面向对象的方式压缩或编写的情况.

I have jQuery 100+ case around which are as follows where I want to compress or write in Object oriented.

var shortcode = {
    init: function () {
    jQuery('.primary_select select').change(function () {
        jQuery('.secondary_select').hide();
        if (this.value != '') {
            if (
              jQuery('#secondary_' + this.value).show()
              .children('.tertiary_select')
              .size() == 0) {
                 jQuery('#secondary_' + this.value).show();
            }
        }
    }).change();

    jQuery('#sendtoeditor').click(function () {
        shortcode.sendToEditor();
    });

    jQuery('.secondaryselect select').change(function () {
        jQuery(this).closest('.secondary_select')
        .children('.tertiary_select').hide();
        if (this.value != '') {
            jQuery('#atp-' + this.value).show();
        }
    }).change();
},
generate: function () {
var type = jQuery('.primary_select select').val();

switch (type) {
    case 'dropcap':
    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;

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;
default:
    return extra();
    }
},
sendToEditor: function () {
    send_to_editor(shortcode.generate());
}
}

让我这样说，我拥有所有输入名称属性，这些值的前缀是大小写类型，其后缀是其唯一名称，例如类型，文本，颜色等. 我想像这样压缩它

Let me put it this way, I have all the input name attributes with the values prefixed with the case type suffixed with its unique names like type, text, color etc. I want to compress it something like this

case 'dropcap':
    var type, text, text_color, bgcolor;
    jQuery('[name="+'case'+_var"]').val();

    var droptype        = jQuery('#dropcap_type').val();

    if ( var )  { var = ' var="' + getvalue + '"'; }

    if(droptype == 'dropcap3'){
        return '[dropcap'+ type + text_color + text +']';
    }else{
        return '[dropcap'+ type + bgcolor + text_color + text +']';
    }
break;
case 'icons':
    var style,size,color;
    if ( var )  { var = ' var="' + getvalue + '"'; }

    return '\n[icons' + style + size + color + ']\n';
break;

这是一种好的做法还是有更好的方法呢? 如何压缩上面的代码?

Is this a good practice to do or is there a better way to do this? How do I compress the above code?

推荐答案

您可以将数组中的属性名称作为类数组列出并遍历它们.在这里，我已经将您的另一个问题针对我的答案改编为全班学生:

You can list the attribute names in an array as a class array and loop through them. Here I've adapted my answer on another question of yours to your whole class:

var shortcode = {
    allTypeAttributes: {
        'dropcap': ['type', 'text', 'text_color', 'bgcolor'],
        'icons': ['style', 'size', 'color']
    },

    init: function () {
        $('.primary_select select').change(function () {
            $('.secondary_select').hide();
            if (this.value != '') {
                if (
                    $('#secondary_' + this.value).show()
                        .children('.tertiary_select')
                        .size() == 0) {
                    // TODO: show() is already called in the if statement... fix it!
                    $('#secondary_' + this.value).show();
                }
            }
        }).change();

        $('#sendtoeditor').click(function () {
            this.sendToEditor();
        });

        $('.secondaryselect select').change(function () {
            $(this).closest('.secondary_select')
                .children('.tertiary_select').hide();
            if (this.value != '') {
                $('#atp-' + this.value).show();
            }
        }).change();
    },
    generate: function () {
        var type = $('.primary_select select').val(),
            typeAttributes = this.allTypeAttributes[type];

        if (typeAttributes !== undefined) {
            return this.createShortcode(type, typeAttributes);
        } else {
            return extra();
        }
    },
    createShortcode: function (name, typeAttributes) {
        var value;
        $.each(typeAttributes, function (id, attrib) {
            value = $('[name="' + name + '_' + attrib + '"]').val();
            if (value !== '') {
                ret += ' ' + attrib + '="' + value + '"';
            }
        });
        return '\n[' + name + ret + ']\n';
    },
    sendToEditor: function () {
        send_to_editor(this.generate());
    }
}

也许您可以从createShortcode返回一个数组而不是字符串，然后将其发送给编辑器?而且似乎有一个错误，我已经用TODO标记了它.

Maybe you could return an array from createShortcode instead of the string and send it to the editor? And there seems to be a bug, I've marked it with a TODO.

并且如前所述，如果您的DOM很大，则应考虑选择器优化.在选择元素名称之前，这还将有助于限制范围:

And as mentioned before, if your DOM is big, you should think about selector optimisation. It will also help limiting the scope before selecting on element names:

jQuery('.inputContainer').find('[name="icons_' + attrib + '"]')

这篇关于从选定的输入中获取值并返回一个简码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！