Question

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

<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');
    });
});

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

Answer 1

this.value使用input。见下文，

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

DEMO： http://jsfiddle.net/qU5tR/10/

Answer 2

试试这个

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

html()仅替换innerHtml。它不会改变按钮值。

Answer 3

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

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

或

this.value = "Changed";

Answer 4

我认为你需要的是

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

而不是

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

Answer 5

如何正确地做到这一点：

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

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

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

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

为什么它不起作用：

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

Answer 6

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

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

Answer 7

这些是没有innerHTML的输入按钮，用于设置按钮文本以设置按钮的value属性或value属性。

$(this).attr('value', 'Changed'); /* Change value attribute */
// or this.value = 'Changed';     /* Change value property */

Answer 8

尝试

this.value = 'changed' ;

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

快

FIDDLE

Answer 9

尝试.attr()方法：

$(document).ready(function() {
    $('.add-button').click(function() {
        alert('clicked');
        $(this).attr( 'value', 'NEW_TEXT');
    });
});

Answer 10

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

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

jQuery使用$（this）选择器更改Clicked按钮的值

10 个答案:

如何正确地做到这一点：

为什么它不起作用：