javascript - HTML + JS 如何更改/取消更改文本 onclick

Question

我想编写一个 JS，在单击时更改按钮上的文本(“显示”)，但是当单击另一个按钮时，先前单击的按钮会将其文本从“显示”更改为初始文本(例如“A') 设想: 1. 点击按钮 A -> 'A' 变为 'SHOW' 2. 单击按钮 B -> 'B' 更改为 'SHOW' 但同时 'SHOW'(从按钮 A)变回 'A'

<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>

在上面你会发现我在 html 文件中的示例按钮。 在 JS 文件中我有:

$("button1").on('click', function () {
    $('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
    $(this).addClass('btn_click');
    $(this).text('SHOW');
});

以前我使用类选择器而不是id one，但仍然无法完成我想要的。添加和删​​除 CSS 非常有效

Answer 1

我想这就是您要找的:

$("button").click(function() {
  var clicked_button = $(this);
	$("button").each(function() {
    if($(this).is(clicked_button)) {
      $(this).text('SHOW');
      
    }
    else {
     $(this).text($(this).attr('value'))
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" value="A">A</button>
    <button id="button2" value="B">B</button>
    <button id="button3" value="C">C</button>

在此处检查工作示例 https://jsfiddle.net/prxd81vk/