在没有 id 或类的单击时更改按钮值

Change Button value on click without id or class

本文关键字：按钮 单击 id      更新时间：2023-09-26

假设我的按钮如下：

<input type="button" value="BLUE" name="button_blue" />

我想要的是当我单击按钮时，value="BLUE"应该更改为value="RED"或任何我想要的东西。

使用 val（） 方法：

$('button').on('click',function(){
  $(this).val('RED');
});

要在再次单击时更改其先前的值，请执行以下操作：

$('button').on('click',function(){
  $(this).val($(this).val() == 'RED' ? 'BLUE' : 'RED');
});

你可以在没有jQuery的情况下完全解决这个问题：

<input id='button' type="button" value="BLUE" name="button_blue" />

JavaScript：

document.getElementById('button').onclick = function(){
    this.value = 'red';
};

演示：http://jsfiddle.net/jg1hjk1u/

由于按钮具有name="button_blue"属性，因此请使用属性等于选择器

$('[name=button_blue]').on('click',function(){
  $(this).val('RED');
});

工作演示：http://jsfiddle.net/dw8kmh3g/

试试这段代码

$('button').on('click',function(){
  $(this).val($(this).val() == "RED" ? "BLUE" : "RED")
  //OR
  //this.value = this.value == "RED" ? "BLUE" : "RED";
});

我只会创建一个单独的CSS类：

.button{
background-color:red;
}

然后在单击时添加类：

$('#button').on('click',function(){
!$(this).hasClass('ButtonClicked') ? addClass('button') : '';
});

您还可以通过切换类来创建具有"开/关"开关感觉的功能：

<button id="button">Hello</button>

这里工作链接：这个JSFIDDLE演示

首先在

按钮上添加一个 id -

<input type="button" id="myColorButton" value="BLUE" name="button_blue" />

然后将以下代码段添加到脚本中 -

document.getElementById("myColorButton").onclick = function() {
    this.value="RED";
};
相关文章：