Question

假设我的按钮如下：

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

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

Answer 1

使用val()方法：

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

再次点击以更改之前的值：

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

Answer 2

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

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

的javascript：

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

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

Answer 3

试试这段代码

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

Answer 4

由于该按钮具有name="button_blue"属性，请使用Attribute Equals Selector

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

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

Answer 5

首先在按钮上添加一个id -

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

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

document.getElementById("myColorButton").onclick = function() {
    this.value="RED";
};

Answer 6

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

.button{
background-color:red;
}

然后点击添加课程：

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

您还可以通过切换课程来创建具有“开/关”开关感觉的功能：

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

此处有工作链接：this jsfiddle demo

单击时更改按钮值，不带id或类

6 个答案: