Question

我有以下代码，它有点长，忽略opts，它应该没有它，但似乎有一些我做错了因为没有发生。

 var container = 'body';

 var structureWrapper = '<div class="content-login"></div>';

 var structure = [
'<form name="', opts.formClass, '" class="', opts.formClass, '" method="post" action="#">',
    '<fieldset class="', opts.fieldsWrapper, '">',
        '<fieldset class="', opts.userWrapper, '">',
            '<label for="', opts.userInt, '" class="', opts.userLbl, '"><img src="', opts.userIcon, '" alt="', opts.userName, '" /></label>',
            '<input type="text" name="', opts.userInt, '" class="', opts.userInt, '" placeholder="', checkNameLenght(opts.userName, namesLenght.userNameLenght, 16, 'Username'), '" value="" autocomplete="off" />',
        '</fieldset>',
        '<fieldset class="', opts.passWrapper, '">',
            '<label for="', opts.passInt, '" class="', opts.passLbl, '"><img src="', opts.passIcon, '" alt="', opts.passName, '" /></label>',
            '<input type="password" name="', opts.passInt, '" class="', opts.passInt, '" placeholder="', checkNameLenght(opts.passName, namesLenght.passNameLenght, 16, 'Password'), '" value="" autocomplete="off" />',
        '</fieldset>',
        '<fieldset class="', opts.btnWrapper, '">',
            '<button type="submit" name="', opts.btnInt, '" class="', opts.btnInt, '">', checkNameLenght(opts.btnName, namesLenght.btnNameLenght, 7, 'Login'), '</button>',
        '</fieldset>',
    '</fieldset>',
    '<div class="toogle-button">',
        '<ul class="inside">',
            '<li class="toogle"><a><img src="assets/gfx/toogle.png" alt="Back" /></a></li>',
        '</ul>',
    '</div>',
'</form>',
'<div class="toogle-buttons">',
'</div>'
];





var getProps = function(obj) {
return {
    'position': 'absolute',
    'top': (($(window).height() - $(obj).outerHeight()) / 2) + 'px',
    'left': (($(window).width() - $(obj).outerWidth()) / 2) + 'px'
}
}

var showObj = function(obj, callback) {
return setTimeout(function() {
    if (opts.centerObj === true) {
        var cssProps = getProps(obj);
        obj.css(cssProps).fadeIn('slow');
    }
    else {
        obj.fadeIn('slow');
    }
    if (typeof callback == 'function') {
        callback.call(this);
    }
}, 1500);
}


var appendStructure = function(wrapper, structure, cls) {

return $(wrapper).appendTo(container).hide(function() {
    var obj = $(container).find(cls);
    $(structure.join('')).appendTo(obj);
    showObj(obj, function() {
        if (opts.centerObj === true) {
            $(window).resize(function() {
                var cssProps = getProps(obj);
                obj.css(cssProps);
            });
        }
    });
});
}

appendStructure(structureWrapper, structure, '.content-login');

它假设要做的是取出那个数组并连接它，然后将它附加到容器中，body在我的情况下，然后淡出内容。你能发现我做错的事吗？

我很感激帮助:)你也有一个小提琴：http://jsfiddle.net/VUjMH/。

Answer 1

当没有设置opts属性时，您的代码会进行故障转移，因为您无法对无法首先转换为字符串的内容执行连接。

在整个代码中，“长度”一词拼写错误“lenght”

除此之外，我已经通过代码形式jsfiddle并将其提升到可行的程度。

我对“checkNameLength”函数做了一些小改动，删除了“namesLength”参数并用“name.length”替换了它的实例

var container = 'body';
 var opts = {
    debug: true,
     formClass:"",
     userWrapper:"",
     userInt:"",
     userLbl:"",
     userIcon:"" ,
     userName:"",
     passName:"",
     btnName:""
 }

  /*Removed redundant namesLength var*/   
 var checkNameLength = function(name, allowedLength, defaultName) {
     if ((name.length<= allowedLength) && !(/\s[^a-z]/i.test(name))) {
         return name;
     }
     else {
         if (opts.debug === true) {
             console.log(name + ' is to long or contains special characters / numbers | Please      choose a name shorter than ' + allowedLength+ ' characters or remove any character / number');
         }
         return defaultName;
     }
 }


 var structureWrapper = '<div class="content-login"></div>';

 var structure = [
     '<form name="', opts.formClass, '" class="', opts.formClass, '" method="post" action="#">',
    '<fieldset class="', opts.fieldsWrapper, '">',
        '<fieldset class="', opts.userWrapper, '">',
            '<label for="', opts.userInt, '" class="', opts.userLbl, '"><img src="', opts.userIcon, '" alt="', opts.userName, '" /></label>',
            '<input type="text" name="', opts.userInt, '" class="', opts.
userInt, '" placeholder="', checkNameLength(opts.userName,  16, 'Username'), '" value="" autocomplete="off" />',
        '</fieldset>',
        '<fieldset class="', opts.passWrapper, '">',
            '<label for="', opts.passInt, '" class="', opts.passLbl, '"><img src="', opts.passIcon, '" alt="', opts.passName, '" /></label>',
            '<input type="password" name="', opts.passInt, '" class="', opts.passInt, '" placeholder="', checkNameLength(opts.passName, 16, 'Password'), '" value="" autocomplete="off" />',
        '</fieldset>',
        '<fieldset class="', opts.btnWrapper, '">',
            '<button type="submit" name="', opts.btnInt, '" class="', opts.btnInt, '">', checkNameLength(opts.btnName, 7, 'Login'), '</button>',
        '</fieldset>',
    '</fieldset>',
    '<div class="toogle-button">',
        '<ul class="inside">',
            '<li class="toogle"><a><img src="assets/gfx/toogle.png" alt="Back" /></a></li>',
        '</ul>',
    '</div>',
'</form>',
'<div class="toogle-buttons">',
'</div>'
];





var getProps = function(obj) {
    return {
        'position': 'absolute',
        'top': (($(window).height() - $(obj).outerHeight()) / 2) + 'px',
        'left': (($(window).width() - $(obj).outerWidth()) / 2) + 'px'
     }
 }

 var showObj = function(obj, callback) {
     return setTimeout(function() {
         if (opts.centerObj === true) {
             var cssProps = getProps(obj);
             obj.css(cssProps).fadeIn('slow');
         }
         else {
             obj.fadeIn('slow');
        }
         if (typeof callback == 'function') {
            callback.call(this);
         }
     }, 1500);
 }


 var appendStructure = function(wrapper, structure, cls) {

     return $(wrapper).appendTo(container).hide(function() {
         var obj = $(container).find(cls);
         $(structure.join('')).appendTo(obj);
         showObj(obj, function() {
             if (opts.centerObj === true) {
                 $(window).resize(function() {
                     var cssProps = getProps(obj);
                     obj.css(cssProps);
                 });
             }
         });
     });
 }

 appendStructure(structureWrapper, structure, '.content-login');

jQuery插件|为什么这部分不起作用？

1 个答案: