JavaScript 切换按钮不适用于 HTML 表格中的按钮

问题描述

以下 JavaScript 代码切换 HTML 按钮。但是

元素中的按钮不会被切换，而是按钮会瞬间闪烁标签“忘记”。为什么下面的 JavaScript 代码不会切换表格每个单元格中的 元素？

<button class="buttonOne">Connect</button>
<button class="buttonTwo">Connect</button>
<button class="buttonThree">Connect</button>

const $ = document.querySelector.bind(document);

let clickedOne = false;
let clickedTwo = false;
let clickedThree = false;
$(".buttonOne").addEventListener("click",(e) => {      
  if (clickedOne) {
    e.target.innerText = "Connect";
  } else {
    e.target.innerText = "Forget";

  }

  clickedOne = !clickedOne;
});

$(".buttonTwo").addEventListener("click",(e) => {
  if (clickedTwo) {
    e.target.innerText = "Connect";
  } else {
    e.target.innerText = "Forget";
  }

  clickedTwo = !clickedTwo;
});

$(".buttonThree").addEventListener("click",(e) => {
  if (clickedThree) {
    e.target.innerText = "Connect";
  } else {
    e.target.innerText = "Forget";
  }

  clickedThree = !clickedThree;
});

2 个答案:

答案 0 :(得分：0)

您可以通过这种方式解析按钮并为每个按钮动态设置事件侦听器。

<button class="buttonOne">Connect</button>
<button class="buttonTwo">Connect</button>
<button class="buttonThree">Connect</button>


var buttons = document.querySelectorAll('button');

[].slice.call(buttons).forEach(button => {
  button.addEventListener('click',(e) => {
    if (e.target.innerHTML == 'Connect') {
      e.target.innerHTML = 'Forget';
    } else {
      e.target.innerHTML = 'Connect';
    }
  });
});

这是一个活生生的例子：https://jsfiddle.net/pqtud56k/2/

答案 1 :(得分：0)

您可以通过提供唯一 ID 来选择它们。示例：

   <button id="btn1" class="buttonOne">Connect</button>
   <button id="btn2" class="buttonTwo">Connect</button>
   <button id="btn3" class="buttonThree">Connect</button> 

并在您的 Js 文件中选择它们：

const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');

这样你就应该没有这些按钮的问题了。

相关问题

• 用于切换表格的按钮
• 切换按钮适用于JSbin，但不适用于烧瓶服务器
• 切换框不能使用按钮，但适用于段落
• 用表中的按钮切换不工作
• 使用按钮切换表格
• 切换按钮不适用于SharedPreferences
• 脚本中的切换按钮不适用于我
• JavaScript 切换按钮不适用于 HTML 表格中的按钮
• 导航栏切换按钮不适用于 toggleClass("active");
• 下拉切换仅适用于替代按钮而不是所有按钮

最新问题

• 我写了这段代码，但我无法理解我的错误
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• java中的random.expovariate()
• 每千个数字得到
• 是否有可能使 loadstring 不可能等于打印？卢阿
• 启动调试会话时出错 - Google Cloud Shell
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动

解决方法

您可以通过这种方式解析按钮并为每个按钮动态设置事件侦听器。

<button class="buttonOne">Connect</button>
<button class="buttonTwo">Connect</button>
<button class="buttonThree">Connect</button>


var buttons = document.querySelectorAll('button');

[].slice.call(buttons).forEach(button => {
  button.addEventListener('click',(e) => {
    if (e.target.innerHTML == 'Connect') {
      e.target.innerHTML = 'Forget';
    } else {
      e.target.innerHTML = 'Connect';
    }
  });
});

这是一个活生生的例子：https://jsfiddle.net/pqtud56k/2/

,

您可以通过提供唯一 ID 来选择它们。示例：

   <button id="btn1" class="buttonOne">Connect</button>
   <button id="btn2" class="buttonTwo">Connect</button>
   <button id="btn3" class="buttonThree">Connect</button> 

并在您的 Js 文件中选择它们：

const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');

这样你就应该没有这些按钮的问题了。