为所有按钮绑定点击事件后，无法正确获取单个按钮文本及切换选中状态

问题出在箭头函数的this指向上：jQuery的事件回调默认会把this指向触发事件的DOM元素，但箭头函数不会绑定自身的this，它的this继承自外层执行上下文（这里是全局的window）。所以你代码里的$(this)并不是当前点击的按钮，而是$(window)，调用.text()就会获取到页面中所有按钮的文本拼接，.addClass()也不会作用在正确的元素上，导致选中状态切换失败。

解决方法 #

方法1：改用普通函数作为回调 #

把箭头函数换成普通函数，这样this就会正确指向被点击的按钮：

<ul>
  <li><button>Dog</button></li>
  <li><button>Cat</button></li>
  <li><button>Moose</button></li>
</ul>

$('button').click(function() {
    $('button').removeClass("selected");
    $(this).addClass("selected");
    let btnText = $(this).text();
    console.log(btnText);
});

方法2：使用事件对象获取当前元素 #

如果一定要用箭头函数，可以通过回调的event参数的target属性拿到当前点击的按钮：

$('button').click((event) => {
    $('button').removeClass("selected");
    const $currentBtn = $(event.target);
    $currentBtn.addClass("selected");
    let btnText = $currentBtn.text();
    console.log(btnText);
});

内容的提问来源于stack exchange，提问作者Oluwatobi Oladoye