javascript - テーブルの値を編集した後、（jqueryまたはjavascriptを使用して）フィールドを更新するにはどうすればよいですか？

Question

カートを実装しました。誰かがカートにアイテムを追加した後、数量を変更し、[更新]をクリックして必要な変更を加えることができます。しかし、それがクリックされた後、私はそれをUPDATEDと言いたいです！

そして今、誰かがフィールドをもう一度クリックして更新した場合。更新を示すボタンに戻るはずです。

どうすればよいですか？私はjqueryやjavascriptにあまり精通していません

ありがとうございました。

Answer 1

サーバーの更新をどのように実行するかは正確にはわかりませんが、使用できる可能性のある短いスニペットを次に示します。

    $('document').ready(function(){

       $('#yourInputField').change(function() {

           $('#yourButton').addClass('enable');

        });

         $('#yourButton').on("click",function() {

          //Fire ajax for server, onsuccess is ajax success method
           onsuccess(e){
           $(this).removeClass('enable');
           $(this).addClass('disable');
           };

        });

    });

Answer 2

始めるための基本的な例を次に示します。

HTML

<div class="item">
    <input class="amount" type="text" />
    <div class="update">
        <button class="update-button" type="button">Update</button>
        <div class="update-message">Updated!</div>
    </div>
</div>

JS

$('.update-button').click(function () {
    // Hide the update button
    $(this).hide()
    // Show the update message
    $(this).siblings('.update-message').show();
});

$('.amount').click(function () {
    // Show the update button
    $(this).closest('.item').find('.update-button').show();
    // Hide the update message
    $(this).closest('.item').find('.update-message').hide();
});

jsfiddle