使用jQuery实现按钮文本在YES/NO间切换（基于Webpack环境）

方案一：利用已导入的jQuery实现 #

直接在现有代码基础上添加点击事件绑定即可：

import $ from "jquery";

const rootApp = document.getElementById("root");
rootApp.innerHTML = '<button>NO</button>';

// 绑定点击事件切换文本
$('button').on('click', function() {
  // 判断当前文本并切换
  $(this).text($(this).text() === 'NO' ? 'YES' : 'NO');
});

方案二：原生JavaScript实现（无需依赖jQuery） #

如果不想依赖jQuery，也可以用原生API完成：

const rootApp = document.getElementById("root");
rootApp.innerHTML = '<button>NO</button>';

const toggleBtn = document.querySelector('button');
toggleBtn.addEventListener('click', function() {
  this.textContent = this.textContent === 'NO' ? 'YES' : 'NO';
});

两种方案都能实现点击按钮时，文本在"NO"和"YES"之间来回切换的效果。

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