jQueryプラグイン|なぜこの部分は機能しないのですか？

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

最初に文字列に変換する手段を持たないものに対して連結を実行できないため、オプトプロパティが設定されていないと、コードはフェイルオーバーされます。あなたのコード全体

語「長さ」「な長」別に私はコード形式のjsfiddleを進めてきたことから、

をスペルミスし、それが動作ポイントにそれを育てました。

私は別にあなたの問題から、私は親切にさせましょう「namesLength」パラメータを削除し、「checkNameLength」機能に小さな変更を行い、「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');