為什么 javascript 值屬性不像手動更改那樣工作？

Question

我在觸發動作時遇到了一些問題。 我有范圍 slider 和輸入類型號。

輸入編號被隱藏，我的范圍輸入正在改變輸入編號的值，如下所示：

 function updateTextInput_water(val) { var input = document.getElementById('nf-field-32'); document.getElementById('nf-field-32').value = val; input.value; input.setAttribute('value', input.value); }

 <input type="range" value="20" name="rangeInput" min="1" max="101" onchange="updateTextInput_water(this.value);"> <input type="number" id="nf-field-32" name="nf-field-32 value=" 20 " min="1 " max="101 " step="1 ">

當輸入數字設置為特定數字時，我有一些動作。 當我使用 keydown 和 keyup 手動更改數字時它可以工作，當我從鍵盤輸入這個特定數字時它也可以工作，但是當我使用 slider 更改我的輸入數字的值時它不起作用。

為什么？

觸發動作（顯示/隱藏）：

/**
 * Handle showing/hiding fields
 * 
 * @package Ninja Forms Conditional Logic
 * @copyright (c) 2016 WP Ninjas
 * @since 3.0
 */
define( [], function() {
    var controller = Marionette.Object.extend( {
        initialize: function() {
            nfRadio.channel( 'condition:trigger' ).reply( 'hide_field', this.hideField, this );
            nfRadio.channel( 'condition:trigger' ).reply( 'show_field', this.showField, this );
        },

        hideField: function( conditionModel, then ) {
            var targetFieldModel = nfRadio.channel( 'form-' + conditionModel.collection.formModel.get( 'id' ) ).request( 'get:fieldByKey', then.key );

            if( 'undefined' == typeof targetFieldModel ) return;
            targetFieldModel.set( 'visible', false );
            if ( ! targetFieldModel.get( 'clean' ) ) {
                targetFieldModel.trigger( 'change:value', targetFieldModel );
            }
            
            nfRadio.channel( 'fields' ).request( 'remove:error', targetFieldModel.get( 'id' ), 'required-error' );
        },

        showField: function( conditionModel, then ) {
            var targetFieldModel = nfRadio.channel( 'form-' + conditionModel.collection.formModel.get( 'id' ) ).request( 'get:fieldByKey', then.key );
            //TODO: Add an error to let the user know the show/hide field is empty.
            if( 'undefined' == typeof targetFieldModel ) return;
            targetFieldModel.set( 'visible', true );
            if ( ! targetFieldModel.get( 'clean' ) ) {
                targetFieldModel.trigger( 'change:value', targetFieldModel );
            }
            var viewEl = { el: nfRadio.channel( 'form-' + conditionModel.collection.formModel.get( 'id' ) ).request( 'get:el' ) };
            nfRadio.channel( 'form' ).request( 'init:help', viewEl );
        }
    });

    return controller;
} );

這是我比較並選擇大於 100 的數字然后我在我的表單中顯示或隱藏文本輸入的部分： Github ninja form

Answer 1

如果您想顯示/隱藏字段甚至 html 塊，您可以使用 ninja forms 的條件邏輯插件來實現。 在我看來，在插件 UI 中設置規則/條件比使用自定義代碼更有效。