javascript - 传递和接收 $(this) 作为参数的方式？

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) 对象？

score 4 · Accepted Answer

是的，使用.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);

score 1 · Accepted Answer

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

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

如果您没有其他要传递的参数，您可以直接使用：

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

score 1 · Accepted Answer

你可以使用$.proxy：

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

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

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

示例小提琴

score 1 · Accepted Answer

你有两个选择：

使用参数

$('.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!');
}

score 0 · Accepted Answer

是的，你可以使用

call(this, arg1,arg2) 或者 apply(this, arrayOfArgs)

有关差异的说明，请参阅下面的链接！ http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx

javascript - 传递和接收 $(this) 作为参数的方式？

5 回答 5

Related

Reference