为何变量调用jQuery .hide()方法无效？直接选元素却可行？

你遇到的问题核心是两处关键错误：

错误原因分析 #

1. 最初代码的变量作用域问题
   object1、button这些变量是在$(document).ready()的回调函数内部用const声明的，属于局部变量，回调函数外部的代码根本访问不到它们，所以直接在外面写button.addEventListener会触发变量未定义的错误，更无法调用object1.hide()。

2. 补充代码的对象类型混淆问题
   $('#button')返回的是jQuery包装后的对象，而addEventListener是原生DOM元素的方法，jQuery对象没有这个方法，导致事件监听器根本没绑定成功，点击按钮自然不会执行hide()。

正确写法示例 #

写法一：使用jQuery的事件绑定方法 #

全程用jQuery对象操作，调用其提供的.on()方法绑定事件：

<div id="object1">Object 1</div>
<div id="object2">Object 2</div>
<input type="button" id="button" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $(document).ready(() => {
        const object1 = $('#object1');
        const button = $('#button');

        button.on('click', () => {
            object1.hide();
        });
    });
</script>

写法二：将jQuery对象转为原生DOM元素 #

如果非要用原生的addEventListener，可以通过索引[0]或.get(0)把jQuery对象转成原生DOM元素：

<div id="object1">Object 1</div>
<div id="object2">Object 2</div>
<input type="button" id="button" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $(document).ready(() => {
        const object1 = $('#object1');
        // 转为原生DOM元素
        const button = $('#button')[0];

        button.addEventListener("click", () => {
            object1.hide();
        });
    });
</script>

内容的提问来源于stack exchange，提问作者Caleb Nugent