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>

如何使用JQuery隐藏字段：contest_numofwinners_input如果用户在字段中指定了值：contest_max_retweet_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

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

（编辑：我喜欢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 5

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

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

Answer 6

大卫托马斯的回答当然很有效，我会将此用于简单的案例。

但是，我一直在研究一个插件，它具有多个条件和多个元素。我现在想分享一下。

以下是适用于您的问题的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);

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

6 个答案: