web-dev-qa-db-ja.com

JQueryでボタンテキストを変更する方法

私はこれまでにこの作業コードを持っています：

フィドル： http://jsfiddle.net/r4emt/12/

現在、JQuery UIオートコンプリートに入る前に、ボタンには「Hello」と表示されます。 JQuery UIオートコンプリートで「item」と入力すると、ボタンに「World」と表示されるようになります。 「world」ボタンをクリックして、リストにアイテムを配置します。アイテムを再度入力する場合、1つを選択して、リストにすでにあるアイテムの[置換]ボタンをクリックできます。ただし、これを行うと、ボタンには「world」と表示されますが、入力フィールドには何もないため、「hello」と表示されます。入力フィールドをクリックしてから、削除または戻る矢印を押すと、「hello」に戻りますが、削除または左側に移動するものはありません。私はそれがコードのこの部分に関係していると思う：

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

特に「キーアップ」部分。だから私の質問は、入力ボックスが空の場合は常にボタンが「hello」を読み取り、フィールドに入力がある場合はボタンが「world」を読み取るように修正するにはどうすればよいですか？ありがとう！

javascriptjqueryjquery-uibuttonjquery-autocomplete
13
sbru

ここ は作業用フィドルです。行われた変更は次のとおりです。

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

ボタンの最後でクリックします：

$('#tags').val('');
$('#tags').keyup();
23
Daniel Eidson

これは長いデッドスレッドであることはわかっていますが、メモリリークの追跡に2日間しか費やしていないので、これを追加する必要がありました（このページのコードを使用しているため）。

重要：ボタン要素にjQuerys text（）を使用しないでください！

この関数は、empty（）で削除できないものをDOMに作成します。その後、長期間にわたってこの関数を複数回呼び出すと、DOMに大量のゴミが落ちて、物が壊れます。

jQuery APIドキュメントを参照してください。

（ドキュメントで言及されている場所を正確に見つけることはできませんが、どこかにあるので、今すぐ電車に走らなければなりません）...

9
User2

jsFiddle Working Demo

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

クリックした後にテキストをHelloに戻すだけではできませんか？これをボタンクリック機能の下部に追加します。

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

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

1
indot_brad

この関数は、実行後、イベントリスナーが常にキーアップ後に評価され、入力ボックスに常に値が設定されるため、初めて機能します。何かを入力してバックスペースを押して消去すると、ボタンをクリックするとHelloに戻ります。

目的の結果を得るには、入力ボックスをクリアしているのでボタンをクリックして送信するときに、そこのテキストも変更できます。

参照： http://jsfiddle.net/r4emt/37/

私はちょうど追加しました：

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

ボタンクリック機能の最後まで。

0
jth_92

「テキスト」機能を使用する

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

このような条件を入れて

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

不要なスペースを削除します。また、クリックイベントのハンドラーでボタンテキストを「Hello」に変更する必要があります

クリック関数の最後にこれを追加します：$(this).text('Hello');

コードは次のとおりです。 http://jsfiddle.net/r4emt/34/

0
armandocj