Question

我想写一个JS，当点击按钮时改变按钮上的文字（到＃39; SHOW＆＃39;），但是当点击另一个按钮时，之前点击的按钮将改变其文本来自＆＃39; SHOW＆＃39;到初始文本（例如＆＃39; A＆＃39;）场景： 1.点击按钮A - ＆gt; ＆＃39; A＆＃39;改为＆＃39; SHOW＆＃39; 2.点击按钮B - ＆gt; ＆＃39; B＆＃39;改为＆＃39; SHOW＆＃39;而且＆＃39; SHOW＆＃39;（来自按钮A）更改回＆＃39; A＆＃39;

<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，但仍然无法完成我想要的。添加和删除CSS工作正常

Answer 1

我认为这就是你要找的东西：

//sample the noise texture
uint3 sampleCoord = uint3(512*input.tex.x, 512*input.tex.y, 0);
float4 distex = shaderTexture.Load(sampleCoord);

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

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

Answer 2

您已经有了解决方案，因为当您向最后一个按下的按钮添加一个类时，您可以使用它来更改文本：

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

Answer 3

您必须使用$("#button1")按ID正确选择按钮。此onClick实际上并未与任何按钮相关联。

Answer 4

您需要跟踪按钮的旧文本，并在按下另一个按钮时恢复该按钮。

示例：

UI

    $("button").on('click', function () {
      $('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
      $("[data-old-text]").each(function () {
      		$(this).text($(this).attr("data-old-text"));
          $(this).removeAttr("data-old-text");
      }); 
      $(this).addClass('btn_click');
      $(this).attr("data-old-text", $(this).text());
      $(this).text('SHOW');
    });

Answer 5

要按ID选择元素，您必须使用$("#button1")。

试试这样：

$("#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');
});

然后添加你想用其他两个按钮做的任何事情（设置A，B，C）。

Answer 6

使用此：

按钮1单击：

 $('#button1').click(function () {
        $('#button1').text('Show');
    });

Buttton 2点击：

 $('#button2').click(function () {
        $('#button2').text('show');
        $('#button1').text('old value');
    });

Answer 7

我会将定位元素从id更改为class属性。

<button class="button" value="A">A</button>
<button class="button" value="B">B</button>
<button class="button" value="C">C</button>

然后，该脚本首先从任何其他按钮清除'btn_click'类，然后将'active'类应用于单击的按钮。

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

Answer 8

 您可以尝试此代码..＆＃xA;＆＃xA;＆lt; script＆gt;＆＃xA; $（document）.ready（function（）＆＃xA; {＆＃xA; $（'＃button1'）。click（function（）＆＃xA; {＆＃xA; $（'。btn_click'）。removeClass （'btn_click'）; //这是一个改变bg颜色的css类＆＃xA; $（this）.addClass（'btn_click'）;＆＃xA; $（this）.text（'Show'）;＆＃ xA; $（'＃button2'）。text（'B'）;＆＃xA;}）;＆＃xA;＆＃xA; $（'＃button2'）。click（function（）＆＃xA; { ＆＃xA; $（'＃button1'）。text（'A'）;＆＃xA; $（this）.text（'Show'）;＆＃xA;}）;＆＃xA;＆＃xA; }）;＆＃XA; ＆LT; /脚本＆GT;＆＃XA;

＆＃XA;

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

8 个答案: