0

所以我已经设置了我的第一个 JS 设计模式——但我遇到了一个问题。

这是我在小提琴上的代码：http: //jsfiddle.net/jrutter/CtMNX/

var emailSignup = {
'config': {
    // Configurable Options
    'container': $('#email-signup'),
    'emailButton': $('#email-submit'),
    'emailInput': $('#email-input'),
    'brontoDirectAddURL': 'URL',
    'brontoListID': '0bbc03ec000000000000000000000003287b',

},
'init': function (config) {
    // stays the same
    // provide for custom configuration via init()
    if (config && typeof (config) == 'object') {
        $.extend(emailSignup.config, config);
    }
        // Create and/or cache some DOM elements
       emailSignup.$container = $(emailSignup.config.container);
emailSignup.$button = $(emailSignup.config.emailButton);
emailSignup.$input = $(emailSignup.config.emailInput);
emailSignup.$brontoURL = emailSignup.config.brontoDirectAddURL;
emailSignup.$brontoList = emailSignup.config.brontoListID;

    // Add email track to drop image pixel into for submission
    emailSignup.$container.append('<div class="email-error"></div>');
    emailSignup.$container.append('<div class="email-track"></div>');

    // Call getEmaile
    emailSignup.getEmail(emailSignup.$button, emailSignup.$input);

    // make a note that the initialization is complete
    emailSignup.initialized = true;

},
'getEmail': function ($button, $input) {

    // click event
    emailSignup.$button.click(function () {
        // get the val
        var $emailVal = $(emailSignup.$input).val();
        // Call validateEmail
        console.log($emailVal);
        emailSignup.validateEmail($emailVal);

        return false;
    });

},
'validateEmail': function ($emailVal) {

    var $emailRegEx = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    //console.log($emailVal);

    if ($emailVal == '') {
        $(".email-error").html('<p>You forgot to enter an email address.</p>');
    } else if (!$emailRegEx.test($emailVal)) {
        $(".email-error").html('<p>Please enter a valid email address.</p>');
    } else {
        $(".email-error").hide();
        emailSignup.submitEmail($emailVal);
    }


},
'submitEmail': function ($emailVal) {
    $(".email-track").html('<img src=' + emailSignup.$brontoURL+'&email='+$emailVal+'&list1=' + emailSignup.$brontoList + '" width="0" height="0" border="0" alt=""/>');
},

};

它是一个通过 bronto 将订阅者添加到电子邮件列表的功能 - 当页面中包含脚本并且页面上也设置了 init 功能时，它可以完美运行。但是，当我将脚本包含在共享标头中并尝试从准备好的文档中触发该功能时，它似乎不起作用。

另外，如果我尝试传入一个“容器”——那也会破坏脚本。不知道我做错了什么？但是，如果我传入 URL - 那确实有效！

$(function () {
     emailSignup.init({
       'brontoDirectAddURL':'URL','container':'#email-signup'
        });
});

任何建议将不胜感激！

4

2 回答 2

0

您的默认配置对象包含 jQuery 集合。但是，您只是将字符串"#email-signup"作为 yourcontainer而不是$("#email-signup"). 这就是错误的来源。因此，您的初始呼叫应该是：

$(function () {
    emailSignup.init({
        'brontoDirectAddURL':'URL','container': $('#email-signup')
    });
});

请注意，由于您的初始模块包含一些 jQuery 调用，因此您还需要将整个emailSignup混乱包装到 a$(document).ready()中。

您可以考虑将整个事情重新配置为一个 jQuery 插件。

于 2013-01-28T19:15:08.947 回答
0

更改以下代码...

emailSignup.$container = emailSignup.config.container;
emailSignup.$button = emailSignup.config.emailButton;
emailSignup.$input = emailSignup.config.emailInput;
emailSignup.$brontoURL = emailSignup.config.brontoDirectAddURL;
emailSignup.$brontoList = emailSignup.config.brontoListID;

进入以下...

// Create and/or cache some DOM elements
emailSignup.$container = $(emailSignup.config.container);
emailSignup.$button = $(emailSignup.config.emailButton);
emailSignup.$input = $(emailSignup.config.emailInput);
emailSignup.$brontoURL = $(emailSignup.config.brontoDirectAddURL);
emailSignup.$brontoList = $(emailSignup.config.brontoListID);

// Add email track to drop image pixel into for submission
emailSignup.$container.append('<div class="email-error"></div>');
emailSignup.$container.append('<div class="email-track"></div>');

您不能在字符串上调用 append。我已经更新了你的JSFiddle。

于 2013-01-28T19:08:48.693 回答