javascript - 从html调用jquery函数而不传递这个

Question

我知道的方式：

HTML：

<input type="button" id="msg" onclick="foo(this);" />

JS：

function foo(elementObj) { elementObj.toggle(); }

有没有办法在不将其作为函数参数传递的情况下获取对elementObj内部的引用？foo()

我想怎么做：

HTML：

<input type="button" id="msg" onclick="foo();" />

JS：

function foo() { elementObj = <any way I can get ref to html element here?>; elementObj.toggle(); }

附言

调用函数如下：$("#msg").click(function(elementObj ) {elementObj.toggle();}

不是我需要的。

Answer 1

有没有办法在不将其作为函数参数传递的情况下获取对elementObj内部的引用？foo()

是的，只需使用适当的不显眼的 jQuery 事件处理程序附加，例如.on或其简写：

$('#msg').click(function() {
    //`this` references the clicked DOM element #msg
});

或者，如果您需要在foo其他地方使用该功能..

function foo(eventObject) { 
    //`this` reference the #msg element
}
$('#msg').click(foo);

---

根据 OP 编辑​​：

function foo() {
   elementObj = <any way I can get ref to html element here?>;
   elementObj.toggle();
}

是的，只需使用 ID 选择器$('#msg')，或者$(this)如果您想引用单击的元素。

function foo() {
   var elementObj = $(this);
   elementObj.toggle();
   //or more directly $(this).toggle()
}
$('#msg').click(foo);

Answer 2

你的例子对我来说很好。

仅仅因为你在函数中传递了一个参数，并不意味着你必须使用它。

您可以在函数中获取对所需任何元素的引用：

<input type="button" onclick="foo(this);" />

<script>

    function foo(thisIsNotUsed) {
        var anotherElement = document.getElementById("someId");
        // create a jQuery object before invoking toggle
        jQuery(anotherElement).toggle();
    }

</script>

NOTE:

I'm pretty sure it's consensus opinion that registering a handler with HTML is a horrible practice.

Answer 3

您可以使用 jquery 获取参考，尝试以下操作：

<input type="button" onclick="foo(this);" />

//javascript
$(document).ready(function(){
   $('input').on('click', function(){
      var theElement = $(this);
   });
});