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

Question

我在一个页面上有几行：

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

在我的

Save()

方法中，我想操作被单击以调用

Save()

方法的 div。我如何传递它（我认为

$(this)

），而不诉诸ID？

非常感谢！

Answer 1

删除

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>

^{[ 查看输出 ]}

或者如果你坚持使用

save()

这样的功能：

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

^{[ 查看输出 ]}

编辑（2015）：.on（'点击'，功能）

<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>

Answer 2

在事件处理程序内，

this

指的是单击的元素。但是，在您从事件处理程序调用的函数内部，即

Save

，

this

将引用窗口。

您可以通过

this

[MDN]

（或 ^Save）显式设置 call 在

apply

中引用的内容：

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

然后你可以在函数内部使用它作为

$(this)

:

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

但是当你使用jQuery时，你真的应该这样做

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

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

或者如果你想要

Save

接受一个元素作为参数，那么只需传递它：

onclick="Save(this);"

并使用 jQuery：

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

Answer 3

非常简单...

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


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

Answer 4

3
投票

简称为：

$(this)

Answer 5

在

Save()

函数内部
this
指的是被单击的 DOM 元素。您可以使用

$(this)

将其转换为 jQuery 对象。

默认情况下，这指的是

window

，因此您需要将

this

作为 Save 函数的参数传递：

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

function Save(div) { }

现在在“保存”中，您可以使用

div

来引用被单击的 div。

我对

this

的行为感到困惑。这个链接帮助了我：http://www.quirksmode.org/js/this.html

Answer 6

您可以轻松地将元素作为“this”传递给函数，然后用 $() 包装它，然后您可以对其执行任何操作。

Html:
<div class="save-button"  onclick="Save(this)" >  Save </div>
JQuery script:
function Save(element){
                // Convert it to jQuery object by wrap in into $()
                $(element).hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>

<div class="save-button"  onclick="Save(this)" >
 Save
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){

});
function Save(element){
                // Convert it to jQuery object by wrap in into $()
                $(element).hide();
}
</script>

1

Answer 7

您也可以这样做：

$("#myDiv").click(function (el) {
  save(el.currentTarget);
});

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

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

问题描述投票：0回答：7

7个回答

最新问题

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

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7