要素をクリックし、その属性をフィールドに渡すことで入力フィールドを取得しました

Question

変更しようとしているプラ​​グインがあります。入力フィールドを使用して金額を受け取り、入力を検証し、[今すぐ支払う]ボタンを表示/非表示にします。もともとは、選択オプションと手動入力を処理するようにコーディングされていました。それPATは次のようになります。

if (!gift_this_product.length) { 
     $('.gift-cards-list input.ywgc-manual-amount').addClass('ywgc-hidden'); 
     $('.ywgc-manual-amount-error').remove(); 

     var amount = 0; 

     if ((select_element.length == 0) || ("-1" == select_element.val())) { 
      /* the user should enter a manual value as gift card amount */ 
      var manual_amount_element = $('.gift-cards-list input.ywgc-manual-amount'); 
      if (manual_amount_element.length) { 
       var manual_amount = manual_amount_element.val(); 
       manual_amount_element.removeClass('ywgc-hidden'); 

       var test_amount = new RegExp('^[1-9]\\d*(?:' + '\\' + ywgc_data.currency_format_decimal_sep + '\\d{1,2})?$', 'g') 

       if (manual_amount.length && !test_amount.test(manual_amount)) { 
        manual_amount_element.after('<div class="ywgc-manual-amount-error">' + ywgc_data.manual_amount_wrong_format + '</div>'); 
        show_gift_card_editor(false); 
       } 
       else { 
        /** If the user entered a valid amount, show "add to cart" button and gift card 
        * editor. 
        */ 
        if (manual_amount) { 
         // manual amount is a valid numeric value 
         show_gift_card_editor(true); 

         amount = accounting.unformat(manual_amount, ywgc_data.mon_decimal_point); 
         console.log(amount); 
         if (amount <= 0) { 
          show_gift_card_editor(false); 
         } 
         else { 
          amount = accounting.formatMoney(amount, { 
           symbol: ywgc_data.currency_format_symbol, 
           decimal: ywgc_data.currency_format_decimal_sep, 
           thousand: ywgc_data.currency_format_thousand_sep, 
           precision: ywgc_data.currency_format_num_decimals, 
           format: ywgc_data.currency_format 
          }); 

あなたは「ywgc・マニュアル・maount」入力フィールドに入力すると、「今すぐ支払う」ボタンが表示される（限り入力が有効であるとして）。それは、このコードをトリガされます。

$(document).on('input', '.gift-cards-list input.ywgc-manual-amount', function (e) { 
    show_hide_add_to_cart_button(); 
}); 

機能「show_hide_add_to_cart_buttonは」私が含まれた第1のコードブロックです。

ボタンを作成し、ボタンの値（attr）を取得して変数として保存し、それを "ymgc-manual-amoun"フィールドに渡すクリックイベントを追加しました。それは機能しますが、金額を更新したり、「今支払う」ボタンを明らかにしません。

これはスコープの問題ですか、入力フィールドにデータを入力するときの "val"の動作と同じですか？

Answer 1

JavaScriptを使用して値を変更しても、changeとinputのようなイベントは発生しません。明示的にトリガする必要があります。

$('.amount-button').click(function(e){ 
    e.preventDefault(); 
    buttonValue = $(this).attr("value"); 
    $('.gift-cards-list input.ywgc-manual-amount').focus(); 
    $('.gift-cards-list input.ywgc-manual-amount').val(buttonValue).trigger("input"); 
});