如何在函数调用模式中使用“this”关键字？

Posted 2023-02-25

【中文标题】如何在函数调用模式中使用“this”关键字？

【英文标题】：How to use 'this' keyword in function invocation pattern?

【发布时间】：2019-02-01 23:51:03

【问题描述】：

我不明白如何在我的函数调用中使用“this”。我有一个函数声明，在 .ready() 中调用，但不在对象上。我正在尝试直接在带有“.btn_toggle”类的按钮旁边切换 div 的可见性。但只有按下的按钮旁边的 div 。并非所有具有“.btn_toggle”类的元素旁边的所有 div。大多数关于主题的答案/参考都与对象上的函数调用有关，我没有这样做

我所尝试的包括监听任何带有“.btn_toggle”类的按钮的点击。并使用 jquery 的 .next() 定位下一个元素。它可以工作，但会切换“.btn_toggle”旁边的所有 div。

jQuery ( document ).ready( function ( $ ) 

    toggleSubDiv(); 

);

function toggleSubDiv ( ) 
    var btn, target;

    btn = $( '.btn_toggle' );
    target = $( '.btn_toggle' ).next();

    // click listener on btn class 'btn_toggle'
    btn.click( function () 

    // toggle visibility
    target.toggle( );
    );

【参考方案1】：

因为this 将引用处理程序内的单击按钮，只需将其包装在jQuery 中并在其上调用.next：

btn.click(function() 
  $(this).next().toggle();
);

【讨论】：

啊，我用的是“this.next()”。愚蠢的。如果没有 jquery，你将如何在相同的上下文中 select 'this'？编辑：如何选择这个

您必须遍历所有按钮并为每个按钮添加一个侦听器。 document.querySelectorAll('.btn_toggle').forEach((btn) => btn.addEventListener('click', function() /* add click functionality, this refers to btn */（尽管对于上述内容，不需要this，因为由于迭代，您已经引用了btn）

.next() 的香草 JS 版本是 .nextElementSibling