根据用户输入使用 Jquery 显示/隐藏字段

Question

  <li class="numeric optional" id="contest_max_retweet_input"><label for="contest_max_retweet">Winning retweet number</label><input id="contest_max_retweet" name="contest[max_retweet]" size="50" type="text" /></li> 
  <li class="numeric optional" id="contest_numofwinners_input"><label for="contest_numofwinners">Number of winners (1-100)</label><input id="contest_numofwinners" name="contest[numofwinners]" size="50" type="text" /></li> 

如果字段：competition_max_retweet_input 中有用户指定的值，如何使用 JQuery 隐藏字段：contest_numofwinners_input？

Answer 1

你可以试试这样的：

$('#contest_max_retweet').change(
    function(){
    if ($(this).val().length) {
        $('#contest_numofwinners').hide();
    }
    else {
        $('#contest_numofwinners').show();
    }
});

JS Fiddle demo

这仅隐藏 input 元素本身，不包含 li 或对应的 label 元素。

Answer 2

有点像

$("#contest_max_retweet").change(function() {
   if($(this).val().length) {
      $("#contest_numofwinners").hide();
   }
   else {
      $("#contest_numofwinners").show();
   }
})
.trigger("change");

Answer 3

$('#contest_max_retweet').change(function() {
    if($('#contest_numofwinners').val() != "")
        $('#contest_numofwinners').hide();
});

Answer 4

change 的问题是您必须保留输入（模糊）才能触发函数。这就是为什么我更喜欢keyup。

$("#contest_max_retweet").keyup(function() {
       if($(this).val().length > 0) {
          $("#contest_numofwinners").hide();
       }
       else {
          $("#contest_numofwinners").show();
       }
    });

Answer 5

我会根据改变时价值的否定来切换。我还将继续并在加载时触发事件处理程序以提供初始显示/隐藏状态（使用名称空间事件以避免导致其他绑定功能执行）。

（编辑：我喜欢 Brandon Boone 为即时操作所做的关于 keyup 的操作，并在我的代码中为事件名称添加了注释。但是，它会增加一点开销，因为该函数会针对每个笔划运行键盘而不是字段模糊时。）

演示：

http://jsfiddle.net/JAAulde/fUKfb/3/

代码：

var namespaced_event = 'change.hideRetweet', //use `keyup.hideRetweet` here to avoid waiting for the input to be blurred
    contest_max_retweet_wrapper = $( '#contest_max_retweet' ).closest( 'li' ); //hides entire input, label, and container--could be pared down if desired

$( '#contest_numofwinners' )
  .bind( namespaced_event, function()
  {
      contest_max_retweet_wrapper.toggle( ! $( this ).val()  );
  } )
  .triggerHandler( namespaced_event );

Answer 6

David Thomas 的回答当然效果很好，我会在简单的情况下使用它。

但是，我一直在开发一个插件，它可以使用多个条件和多个元素来完成此操作。我现在想分享一下。

这是适用于您的问题的 jsfiddle：http://jsfiddle.net/natedavisolds/rVehh/3/

基本上，加载插件然后加载：

var React = $.extend({}, $.fn.reactor.helpers); // Easier to work with helpers
$('#contest_numofwinners_input').reactIf('#contest_max_retweet', React.IsBlank);

好处是您可以将 reactIf 语句链接到一组规则。

这是插件。

(function($){

    $.fn.reactTo = function(selector) {
        var $elements = $(selector),
             $reactor_element = $(this),
             _proxy_event = function() {
                $reactor_element.trigger('change.reactor');
            };

        $elements.filter('select').bind('change.reactor', _proxy_event);
        $elements.filter('input').bind('keyup.reactor', _proxy_event);    

        return this;
    };

    $.fn.reactIf = function(sel, exp_func) {

        var $sel = $(sel);
        var _func = function() {
            return exp_func.apply($sel);                               
        };

        this.each(function() {
            if (!$(this).hasClass('reactor')) { $(this).reactor(); }

            var conditions_arry = $(this).data('conditions.reactor');
            if (!$.isArray(conditions_arry)) { conditions_arry = []};

            conditions_arry.push(_func);

            $(this).data('conditions.reactor', conditions_arry);
        });    

        $(this).reactTo(sel);

        return this;
    };

    $.fn.react = function() {

        this.each(function() {
           $(this).trigger('change.reactor')
        });    

        return this;
    };

    $.fn.reactor = function(options) {
        var settings = $.extend({}, $.fn.reactor.defaults, options);

        this.each(function() {
            // var opts = $.meta ? $.extend({}, settings, $this.data()) : settings;

            var $element = $(this);

            if (!$element.hasClass('reactor')) { $element.data('conditions.reactor', []).addClass('reactor'); }

            var is_reactionary = function() {  
                var conditionalArray = $(this).data('conditions.reactor');
                var r = true;

                $.each(conditionalArray, function() {
                    r = (r && this.call());
                });



                return r;                                
            }

            var reaction = function(evt) {
                evt.stopPropagation();
                if (is_reactionary.apply(this)) {
                   settings.compliant.apply($element);
                } else {
                   settings.uncompliant.apply($element);
                }
            }

            $element.bind('change.reactor', reaction);
        });

        return this;  
    };

    $.fn.reactor.defaults = {
        compliant: function() {
            $(this).show();
        },
        uncompliant: function() {
            $(this).hide();    
        }        
    };

    $.fn.reactor.helpers = {

        NotBlank: function() {
            return( $(this).val().toString() != "" )
        },

        IsBlank: function() {
            return( $(this).val().toString() == "" )
        },

        EqualTo: function(matchStr) {
            var _func = function() {
                var v = $(this).val();
                if (v) { return( v.toString() == matchStr ); }
                else { return false; }
            }
            return _func;
        },

        LessThan: function(number) {
            var _func = function() {
                var v = $(this).val();
                return(!(v && parseInt(v) > number));
            }
            return _func;   
        },

        MoreThan: function(number) {
            var _func = function() {
                var v = $(this).val();
                return(!(v && parseInt(v) < number));
            }
            return _func;  
        },

        Between: function(min, max) {
            var _func = function() {
                var v = $(this).val();
                return(!(v && (parseInt(v) > max || parseInt(v) < min)));
            }
            return _func;
        },

        BetweenSameLength: function(min, max) {
            var len = min.toString().length;
            var _func = function() {
                var v = $(this).val();
                return(!(v && v.length == len && (parseInt(v) > max || parseInt(v) < min)));
            }
            return _func;
        }
    };

})(jQuery);