Показать / Скрыть поле с помощью 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> 

Как я могу использовать JQuery, чтобы скрыть поле :test_numofwinners_input, если в поле указано значение, указанное пользователем :test_max_retweet_input?

Answer 1

Вы можете попробовать что-то вроде:

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

Демонстрация JS Fiddle

Это скрывает только сам элемент 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

Ответ Дэвида Томаса, безусловно, работает хорошо, и я бы использовал его для простых случаев.

Однако я работал над плагином, который делает это с несколькими условиями и с несколькими элементами. Я хотел бы поделиться этим сейчас.

Вот 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);

Приятно то, что вы можете связать оператор ReactionIf с набором правил.

Вот плагин.

(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);

Answer 4

Проблема с change заключается в том, что вы должны оставить вход (размытие), чтобы сработала функция.Вот почему я предпочитаю keyup .

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

Answer 5

Я бы переключился на основе отрицания значения при изменении. Я также хотел бы запустить обработчик события при загрузке, чтобы дать начальное состояние отображения / скрытия (используя событие с пространством имен, чтобы избежать выполнения других связанных функций).

(Редактировать: мне нравится то, что Брэндон Бун сделал в отношении 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

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