Question

我在页面上有几行：

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

在我的Save()方法中，我想操纵点击的div来调用Save()方法。如何在不诉诸ID的情况下传递（我认为$(this)）？

非常感谢！

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>

^{[View output]}

或者如果您坚持使用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）

<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

非常直接......

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


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

Answer 3

在事件处理程序中，this引用单击的元素。但是，在您从事件处理程序调用的函数内部，Save，this将引用窗口。

您可以通过call ^[MDN]（或this）明确设置Save在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 4

只需将其称为：$(this)

Answer 5

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

默认情况下，这是指window，因此您需要将this作为保存功能的参数传递：

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

function Save(div) { }

现在在Save中，你可以使用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

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

6 个答案: