Question

说我有两个图像和两个div。

<html>
    <body>
        <img id="div0image" class='divImages' alt="" src="../images/div0image.png" />
        <img id="div1image" class='divImages' alt="" src="../images/div1image.png" />

        <div id="div0" class='divs'></div>
        <div id="div1" class='divs'></div>
    </body>
</html>

假设CSS就是这个

#div0, #div1, #div0image, #div1image {
    width: 200px;
    width: 200px;
}

现在，我说有一个像这样的Javascript函数

function somethingIsClicked(thisParameter) { //thisParameter needs to be a $(this) object
    var thisID = $(this).attr('id'); //$(this) should refer to the object passed in the parameter (thisParameter)

    $(this).addClass('checkIfThisClassIsAdded');
    alert('works!');
}

然后假设我有这两个功能

$('.divs').click( function() {
    somethingIsClicked($(this));
});

$('.divImages').click( function() {
    thisID = $(this).attr('id'); //div0image
    thisDivsID = thisID.slice(0,4); //div0
    $('#' + thisDivsID).each( function() {
        somethingIsClicked($(this));
    });

是否有正确的方法传递然后接收$（this）作为参数，然后在函数中引用$（this）对象作为参数接收$（this）？

Answer 1

是的，请使用.call。

somethingIsClicked.call(this)

或者，您可以向其传递其他参数，例如事件对象：

$('.divs').click( function(event) {
    somethingIsClicked.call(this,event);
});

或者，如果你有一个参数数组，.apply的工作方式相同。

$('.divs').click( function(event) {
    somethingIsClicked.apply(this,[event,{foo:"Hello World!"}]);
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

但请注意，在这个简化的情况下，做

会更有意义

$('.divs').click(somethingIsClicked);

Answer 2

您可以使用.call(thisParamter, arg1, arg2, arg3 ...)或.apply(thisParamter, [arg1, arg2, ... ])。

$('.divs').click( function() {
    somethingIsClicked.call(this);
});

如果您没有其他参数可以直接使用：

$('.divs').click(somethingIsClicked)

Answer 3

您可以使用$.proxy：

$('#' + thisDivsID).each( function() {
    $.proxy(somethingIsClicked, this)();
});

您的接收函数不需要任何参数，因为this与each()块的范围相同：

function somethingIsClicked() {
    var thisID = $(this).attr('id');    
    $(this).addClass('checkIfThisClassIsAdded');
    alert('works!');
}

Example fiddle

Answer 4

您有两种选择：

使用参数

$('.divImages').click( function() {
    thisID = $(this).attr('id'); //div0image
    thisDivsID = thisID.slice(0,4); //div0
    $('#' + thisDivsID).each( function() {
        somethingIsClicked($(this));
    });

$('.divs').click( function() {
    somethingIsClicked($(this));
});

function somethingIsClicked(element) {
    var thisID = element.attr('id);
    element.addClass('checkIfThisClassIsAdded');
    alert('works!');
}

或使用call更改函数的上下文：

$('.divImages').click( function() {
    thisID = $(this).attr('id'); //div0image
    thisDivsID = thisID.slice(0,4); //div0
    $('#' + thisDivsID).each( function() {
        somethingIsClicked.call(this);
    });

$('.divs').click( function() {
    somethingIsClicked.call(this);
});

function somethingIsClicked() {
    var thisID = $(this).attr('id);
    $(this).addClass('checkIfThisClassIsAdded');
    alert('works!');
}

Answer 5

是的，你可以使用

call(this, arg1,arg2) 要么 apply(this, arrayOfArgs)

请参阅以下链接，了解差异的解释！ http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx

传递和接收$（this）作为参数的方法？

5 个答案: