<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>
如果字段中有用户指定的值：contest_max_retweet_input，我如何使用JQuery隐藏字段：contest_numofinners_input？
您可以尝试以下操作：
$('#contest_max_retweet').change(
function(){
if ($(this).val().length) {
$('#contest_numofwinners').hide();
}
else {
$('#contest_numofwinners').show();
}
});
JS Fiddle演示
这只隐藏input元素本身，不隐藏包含的li或相应的label元素。
类似的东西
$("#contest_max_retweet").change(function() {
if($(this).val().length) {
$("#contest_numofwinners").hide();
}
else {
$("#contest_numofwinners").show();
}
})
.trigger("change");
$('#contest_max_retweet').change(function() {
if($('#contest_numofwinners').val() != "")
$('#contest_numofwinners').hide();
});
change的问题是，必须保留输入(模糊(才能激发函数。这就是为什么我更喜欢keyup。
$("#contest_max_retweet").keyup(function() {
if($(this).val().length > 0) {
$("#contest_numofwinners").hide();
}
else {
$("#contest_numofwinners").show();
}
});
我会在更改时基于值的否定进行切换。我还将继续并在加载时触发事件处理程序，以给出初始的显示/隐藏状态(使用名称分隔的事件来避免导致其他绑定功能执行(。
(编辑：我喜欢Brandon Boone所做的关于按键操作的即时操作，并在我的代码上的事件名称中添加了一条注释。然而，这会增加一点开销，因为该功能是针对键盘上的每一个笔划运行的，而不是当字段模糊时。(
演示：
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 );
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);