jQuery 在JQuery中,如何将被点击的元素传递给onclick事件调用的方法

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7519815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 23:57:33  来源:igfitidea点击:

In JQuery, how to pass the element that was clicked to the method that is called on onclick event

jquery

提问by Barka

I have several of these lines on a page:

我在页面上有几行:

<div class="save-button" onclick="Save()">Save</div>

In my Save()method I want to manipulate the div that was clicked to call the Save()method. How do I pass that in (I think $(this)), without resorting to ids?

在我的Save()方法中,我想操纵被单击以调用该Save()方法的 div 。我如何在(我认为$(this))中传递它 ,而无需求助于 ids?

Many thanks!

非常感谢!

回答by Kalle H. V?ravas

Either remove the save()and use click()to catch the event:

删除save()并使用click()来捕获事件:

<div class="save-button">Save</div>
<script>
$('.save-button').click(function () {
    // Now the div itself as an object is $(this)
    $(this).text('Saved').css('background', 'yellow');
});
</script>

[ View output]

[查看输出]

Or if you insists on using such function as save():

或者,如果您坚持使用以下功能save()

<div onClick="save(this)">Save</div>
<script>
$(function () {
    save = function (elm) {
        // Now the object is $(elm)
        $(elm).text('Saved').css('background', 'yellow');
    };
});
</script>

[ View output]

[查看输出]

EDIT (2015):.on('click', function)

编辑 (2015): .on('click', function)

<div class="save-button">Save</div>
<script>
$('.save-button').on('click', function () {
    // Now the div itself as an object is $(this)
    $(this).text('Saved').css('background', 'yellow');
});
</script>

回答by Felix Kling

Inside the event handler, thisrefers to the clicked element. However, inside the function you call from the event handler, which is Save, thiswill refer to window.

在事件处理程序中,this指的是被点击的元素。但是,在您从事件处理程序调用的函数内部,也就是Savethis将引用 window。

You can explicitly set what thisshould refer to inside Savevia call[MDN](or apply):

您可以通过[MDN](或)显式设置this应在内部引用的内容:Savecallapply

onclick="Save.call(this, event || window.event);"

then you can use it inside the function as $(this):

那么你可以在函数内部使用它$(this)

function Save(event) {
    // `this` refers to the clicked element
    // `$(this)` is a jQuery object
    // `event` is the Event object
};

Butas you are using jQuery, you really should do

但是当您使用 jQuery 时,您确实应该这样做

$('.save-button').click(Save);

to bind the event handler. Mixing markup with logic is not a good style. You should separate the presentation from the application logic.

绑定事件处理程序。将标记与逻辑混合不是一种好的风格。您应该将演示文稿与应用程序逻辑分开。

Orif you want Saveto accept an element as parameter, then just pass it:

或者,如果您想Save接受一个元素作为参数,则只需传递它:

onclick="Save(this);"

and with jQuery:

并使用 jQuery:

$('.save-button').click(function() {
    Save(this);
});

回答by yoozer8

Simply refer to it as: $(this)

简单地将其称为: $(this)

回答by Gabe

Pretty straight forward...

很直接...

$('#myDiv').click(function(){
   save($(this));
})


function save($obj){
   $obj.css('border', '1px solid red');
}

回答by Kyle Trauberman

Inside the Save()function thisrefers to the DOM element that was clicked.You can convert this to a jQuery object with $(this).

Save()函数内部this指的是被点击的 DOM 元素。您可以将其转换为 jQuery 对象$(this)

This refers to windowby default however, so you'll need to pass thisas a parameter of the Save function:

window但是,默认情况下这是指,因此您需要将其this作为 Save 函数的参数传递:

<div class="save-button" onclick="Save(this)">Save</div>

function Save(div) { }

now inside Save, you can use divto refer to the div that was clicked.

现在在 Save 中,您可以使用div来引用被单击的 div。

I was confused about how thisbehaved. This link helped me: http://www.quirksmode.org/js/this.html

我对this表现如何感到困惑。这个链接对我有帮助:http: //www.quirksmode.org/js/this.html