Question

我将3个html元素作为参数传递给JS函数。 JS函数在单独的文件中。我有问题要绑定＆＃39;点击＆＃39;带有_confBtn对象的事件（这是参数）。我的完整JS文件：

 window.HAS = window.HAS || {};
HAS.MyApp = HAS.MyApp || {};

(function (_this, $, undefined) {
var _sessionTimeOut = false;
var _startCountDown = false;
var _counterTime;
var _countDownTime;
var _dialogWrap;
var _confBtn;
var _counter;

_this.init = function (showDialogTime, logofCountDownTime, dialogWrap, counter, confirmationButton) {

    _counterTime = 5;
    _countDownTime = 0;
    _dialogWrap = $('#' + dialogWrap);
    _confBtn = $('#' + confirmationButton);
    _counter = $('#' + counter);
    alert(_confBtn.text());
    createSessionTimeOut();
    $(document).bind("mousemove keypress mousedown mouseup", resetTimeOut);
}

_confBtn.on('click', function () {
    window.clearInterval(_startCountDown);
    _dialogWrap.css('visibility', 'hidden');
    createSessionTimeOut();
    $(document).bind("mousemove keypress mousedown mouseup", resetTimeOut);
});

function createSessionTimeOut() {
    _sessionTimeOut = window.setTimeout(function () {

        _dialogWrap.removeAttr("style");
        _counter.text(_counterTime);
        $(document).unbind("mousemove keypress mousedown mouseup");

        startCountDown();
    }, 2000);
}

function startCountDown() {
    _startCountDown = window.setInterval(function () {
        if (_counterTime >= 0) {
            _counter.text(_counterTime--);
        }
        _countDownTime++;
        if (_countDownTime >= 4) {
            logOutUser();
            return;
        }

    }, 1000);
}

function resetTimeOut() {
    window.clearTimeout(_sessionTimeOut);
    _sessionTimeOut = false;
    createSessionTimeOut();
}

function logOutUser() {
    $.ajax({
        url: '/MyApp/Account/LogOut',
        type: 'GET',
        success: function () {
            document.location.href = '/MyApp/Account/Login';
        }
    })
}

}(window.HAS.MyApp.SessionTimeOut = window.HAS.MyApp.SessionTimeOut || {}, jQuery));

我在单独的页面中打电话，如下所示：

SessionTimeOut.init('5', '5', 'dialog-wrap', 'confirm-button', 'counter');

当我尝试调用click事件时，我遇到了_confBtn的问题。浏览器显示未定义。

请帮忙。

Answer 1

最好做一些更有活力的事情：

function SomeFunction (element1,element2) {
    var e1 = $("#"+element1),
        e2 = $("#"+element2);
    // Do something with variables e1 and e2
}

你可以这样打电话：

//html:
<div id="one"><div>
<div id="two"><div>

//javasctript:
SomeFunction('one','two');

Answer 2

你当然可以这样做，只需使用包含多个选择器的常规jQuery方式。您的代码稍微不正确，因为您实际上只是在不调用它的情况下定义函数，并且在定义函数时不应该将参数/变量传递给函数。

除非您打算区分两组元素，否则我会避免单独声明您在问题中使用的元素，因为有时您永远不会知道所选项目的长度。

function someFunction($ele) {
    // jQuery objects will be accessible as $ele
}

// Call the function
someFunction($('#selector1, #selector2'));

但是，如果是前者，您可以随时这样做：

function someFunction($ele1, $ele2) {
    // jQuery objects will be accessible as $ele1 and $ele2 respectively
    // Example: $ele1.hide();
    //          $ele2.show();
}

// Call the function
someFunction($('#selector1'), $('#selector2'));

例如，您可以参考这个概念验证JSfiddle：http://jsfiddle.net/teddyrised/ozrfLwwt/

function someFunction($ele) {
    // jQuery objects will be accessible as $ele
    $ele.css({
        'background-color': '#c8d9ff'
    });
}

// Call the function
someFunction($('#selector1, #selector2'));

Answer 3

如果要将一些元素传递给函数，可以使用jQuery构造函数来标准化参数

function SomeFunction (element1,element2) {
    element1 = $(element1);
    element2 = $(element2);
    // and you have 2 jQuery objects...
}

// and now you can pass selector as well as jQuery object.
SomeFunction($('div.a'),'#b');

Answer 4

不，您正在以某种方式将函数声明与函数调用混合。定义函数时，不能提供函数参数。然而，这将工作正常：

function someFunction($element1, $element2) {
    //Do something with the elements
}

someFunction($("#element1"), $("#element2"));

请注意，$element1和$element2只是变量名，而领先的$与jQuery没有任何关系。识别引用jQuery选择的变量只是一种常见的约定。

将HTML元素传递给JavaScript函数

4 个答案: