为什么 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 中设置规则/条件比使用自定义代码更有效。