2

我正在尝试在单击按钮时更新按钮的文本。我有许多具有相同类但没有 id 的按钮。为什么这不起作用？

<input type="button" class="add-button" value="Default" />
<input type="button" class="add-button" value="Default" />
<input type="button" class="add-button" value="Default" />
<input type="button" class="add-button" value="Default" />

$(document).ready(function() {
    $('.add-button').click(function() {
        alert('clicked');
        $(this).html('Changed');
    });
});​

警报已触发，但按钮未更改。

4

10 回答 10

9

用于. this.value_ input见下文，

$(document).ready(function() {
    $('.add-button').click(function() {
        alert('clicked');
        this.value = 'Changed';
    });
});​

演示：http: //jsfiddle.net/qU5tR/10/

于 2012-10-17T20:02:16.923 回答
4

试试这个

 $(this).val("changed");

html()只替换innerHtml. 它不会更改按钮值。

于 2012-10-17T20:02:47.613 回答
2

你想改变它的价值，而不是 html。它没有 html 子级。

$(this).val('Changed');

或者

this.value = "Changed";
于 2012-10-17T20:02:19.300 回答
2

我想你需要的是

$(this).val('Changed');

代替

$(this).html('Changed');
于 2012-10-17T20:03:01.160 回答
2

这些是没有 innerHTML 的输入按钮，要设置按钮文本，您必须设置按钮的 value 属性或 value 属性。

$(this).attr('value', 'Changed'); /* Change value attribute */
// or this.value = 'Changed';     /* Change value property */
于 2012-10-17T20:03:09.470 回答
1

正确的方法：

您正在尝试更改该值，因此请使用以下.val()方法：

 $(this).val('Changed');

你也可以简单地使用this.value = 'Changed';, 因为value它是一个跨浏览器的 DOM 属性，甚至是.prop()方法：

$(this).prop('value', 'Changed');

为什么它不起作用：

.html()改变元素的内容，input元素可以没有内容，它没有结束标签。它可以与一个<button>元素一起使用，它有一个结束标签和内容。

于 2012-10-17T20:02:24.227 回答
1

更改值而不是 html。表单字段的 jQuery 内容可以通过 val 更改。

$(document).ready(function() {
    $('.add-button').click(function() {
        alert('clicked');
        $(this).val('Changed'); // or this.value == 'Changed';
    });
});​
于 2012-10-17T20:02:32.147 回答
1

尝试

this.value = 'changed' ;

这比$(this).val('changed');

小提琴

于 2012-10-17T20:04:27.847 回答
0

试试.attr()方法：

$(document).ready(function() {
    $('.add-button').click(function() {
        alert('clicked');
        $(this).attr( 'value', 'NEW_TEXT');
    });
});​
于 2012-10-17T20:01:59.630 回答
0

因为您的按钮不包含任何 html。所以你可以改变它或设置它。你需要的是：

$(this).val("Changed");
于 2012-10-17T20:04:41.827 回答