如何在 JQuery 中更改按钮文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16155018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:33:32  来源:igfitidea点击:

How to change button text in JQuery

javascriptjqueryjquery-uibuttonjquery-autocomplete

提问by sbru

I have this working code so far:

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

Fiddle: http://jsfiddle.net/r4emt/12/

小提琴:http: //jsfiddle.net/r4emt/12/

Right now before you enter the JQuery UI autocomplete, the button reads "Hello". You can type "item" in the JQuery UI autocomplete and you'll notice the button now says "World". Click on the "world" button to put item in the list. If you type item again you can select one and click the replace button on an item already in the list. However once you do this, The button still says "world" but it should say "hello" because there is nothing in the input field. If you click in the input field and then hit delete or back arrow it changes back to "hello" but there isn't anything there to delete or go to the left of. I think it has to do with this part of the code:

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

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

Specifically the 'keyup' part. So my question is how can I fix this so that whenever the input box is empty the button always reads "hello" and when there is input in the field, the button reads "world"? Thanks!

特别是“keyup”部分。所以我的问题是如何解决这个问题,以便每当输入框为空时,按钮总是显示“你好”,当字段中有输入时,按钮显示“世界”?谢谢!

回答by Daniel Eidson

Hereis the working fiddle. Changes made are:

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

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

and at the end of your button click:

并在按钮的末尾单击:

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

回答by User2

I know this is a long dead thread, but I needed to add this, because I've just spent 2 days tracking down a memory leak (Caused by me using code from this page).

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

IMPORTANT: Do not use jQuerys text() on button elements!

重要提示:不要在按钮元素上使用 jQuery 的 text()!

The function creates something in the DOM that cannot be removed by empty(). If you then call the function multiple times over a long period a large amount of rubbish will be plopped in your DOM, causing stuff to break.

该函数在 DOM 中创建了一些不能被 empty() 删除的东西。如果您在很长一段时间内多次调用该函数,则会在您的 DOM 中产生大量垃圾,从而导致内容损坏。

See jQuery API documentation.

请参阅jQuery API 文档。

(Can't find exactly where its mentioned in the documentation, but its in there somewhere, I've got to run for my train now)...

(在文档中找不到它提到的确切位置,但它在某个地方,我现在必须为我的火车跑)...

回答by Mohammad Adil

jsFiddle Working Demo

jsFiddle 工作演示

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

回答by indot_brad

Couldn't you just set the text back to Hello after they click it? Add this to the bottom of your button click function:

你不能在他们点击后将文本设置回 Hello 吗?将此添加到按钮单击功能的底部:

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

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

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

回答by armandocj

Put the condition like this

把条件像这样

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

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

to remove unwanted spaces. Also, you should change the button text to "Hello" in the handler of the click event

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

Add this at the end of the click function: $(this).text('Hello');

在点击函数的末尾添加: $(this).text('Hello');

Here's the code: http://jsfiddle.net/r4emt/34/

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

回答by jth_92

This function only works the first time because after it is executed the event listener is always going to be evaluated after keyup resulting the input box to always have a value. You will notice that once you click the button if you type something and erase it pressing backspace it will change back to Hello.

这个函数只在第一次起作用,因为在它执行之后,事件监听器总是会在 keyup 之后被评估,导致输入框总是有一个值。您会注意到,一旦您单击按钮,如果您键入内容并按退格键将其擦除,它将变回 Hello。

To achieve your desired results, when you click submit on the button since you are clearing out the input box, you can also change the text there as well.

为了达到你想要的结果,当你点击提交按钮时,因为你正在清除输入框,你也可以更改那里的文本。

See: http://jsfiddle.net/r4emt/37/

见:http: //jsfiddle.net/r4emt/37/

I just added:

我刚刚补充说:

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

to the end of the button click function.

到按钮单击功能的末尾。

回答by Tharinda

Use 'text' function

使用“文本”功能

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