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"自分のものとして渡しているだけです。それがエラーの原因です。したがって、最初の呼び出しは次のようになります。container$("#email-signup")

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

emailSignup最初のモジュールにはいくつかの jQuery 呼び出しが含まれているため、混乱全体$(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 に答える