Question

到目前为止我有这个工作代码：

在您输入JQuery UI自动完成之前，该按钮显示为“Hello”。您可以在JQuery UI自动完成中键入“item”，您会注意到该按钮现在显示为“World”。单击“世界”按钮将项目放入列表中。如果再次键入项目，则可以选择一个项目，然后单击列表中已有项目的替换按钮。但是，一旦你这样做，按钮仍然会显示“世界”，但它应该说“你好”，因为输入字段中没有任何内容。如果你点击输入字段，然后点击删除或后退箭头它会改回“你好”，但没有任何东西可以删除或转到左边。我认为这与代码的这一部分有关：

$('#inputWrapper').on('keyup', '#tags', function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');
    }
});

特别是'keyup'部分。所以我的问题是如何解决这个问题，这样每当输入框为空时，按钮总是显示“hello”，当字段中有输入时，按钮显示为“world”？谢谢！

Answer 1

Here是工作小提琴。所做的更改是：

$('#tags').keyup( function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');        
    }
});

并在按钮结束时点击：

$('#tags').val('');
$('#tags').keyup();

Answer 2

我知道这是一个很长的死线程，但是我需要添加它，因为我只花了2天时间追踪内存泄漏（由我使用此页面中的代码引起的）。

重要提示：请勿在按钮元素上使用jQuerys text（）！

该函数在DOM中创建了一些无法通过empty（）删除的内容。如果你在很长一段时间内多次调用该函数，你的DOM中就会堆积大量的垃圾，导致东西破裂。

请参阅jQuery API documentation.

（找不到它在文档中提到的确切位置，但它在某处，我现在必须为我的火车跑...）

Answer 3

难道你不能在点击后将文本设置回Hello吗？将其添加到按钮单击功能的底部：

$(this).text('Hello');

http://jsfiddle.net/r4emt/13/

Answer 4

jsFiddle Working Demo

    $('#inputWrapper').on('keyup', '#tags', function() {
        if($(this).val() == "") {
            $('button.addButton').html('Hello1');
        } else {
            $('button.addButton').html('World');
        }
    });

Answer 5

像这样的条件

if($.trim($(this).val()) == '')

删除不需要的空格。此外，您应该在click事件的处理程序中将按钮文本更改为“Hello”

在点击功能结束时添加： $(this).text('Hello');

这是代码： http://jsfiddle.net/r4emt/34/

Answer 6

此函数仅在第一次起作用，因为在执行后，始终会在keyup之后评估事件侦听器，从而使输入框始终具有值。你会注意到，一旦你点击按钮，如果你输入一些东西并按下退格键，它就会变回Hello。

要获得所需结果，请在清除按钮时单击提交在输入框中，您也可以在那里更改文本。

请参阅：http://jsfiddle.net/r4emt/37/

我刚补充说：

//refreshes button name
$(this).text('Hello');

到按钮点击功能的结尾。

Answer 7

使用'text'功能

       $("#inputWrapper").click(function () {
        $(this).text(function(i, v){
           return v === 'Hello' ? 'World' : 'Hello'
        })

如何在JQuery中更改按钮文本

7 个答案: