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(); }

P.S。

调用这样的函数：$("#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>

注意：

我非常确定通过HTML注册处理程序的共识是一种可怕的做法。

Answer 3

您可以使用jquery获取引用，请尝试以下操作：

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

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

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

3 个答案: