Можете ли вы расширить функцию val () в jQuery?

Question

Есть ли способ расширить функцию val () в jQuery.

По сути, я хочу установить переменную класса, если во входе динамически вводится контент.

Whick обычно будет выглядеть примерно так:

var thisVal = 'Hello World';    
$('#myInput').val(thisVal).addClass('dark');

Было бы просто сказать, чтобы функция val () всегда добавляла класс 'dark' к входу, если есть значение, и удаляла егоесли он пуст.

Возможно?

Answer 1

Попробуйте

$.fn.xval = function () {
    return this.toggleClass(arguments.length).val.apply(this, arguments);
};

Демо: http://jsfiddle.net/mattball/v9YFu/

Answer 2

Вы могли бы сделать это:

var oldVal = $.fn.val;
$.fn.val = function(value) {
    $(this).addClass("dark");
    return oldVal.apply(this, arguments);
};

Но я бы настоятельно не рекомендовал вам использовать его, поскольку установка значения элемента не имеет ничего общего с настройкой свойств CSS.val устанавливает значения, и все тут.Вы можете сделать следующее:

$("#someInput").change(function() {
    if ($(this).text().length > 0) {
        $(this).addClass("dark");
    } else {
        $(this).removeClass("dark");
    }
});

Функция, которую вы передаете для изменения, будет вызываться всякий раз, когда значение изменяется - программно или пользователем ( см. Документацию ).Таким образом, код становится намного более читабельным и понятным, что также облегчает отладку.

Answer 3

$.fn.darkVal = function (value) { return this.addClass('dark').val(value); };

Answer 4

Как указывают другие ответы, вы можете расширить (переписать) функцию val (), но не стоит жестко кодировать в нее несвязанное поведение.

Однако я считаю, чтоУдобный способ вызвать что-либо, когда значение изменяется программно, - это переписать функцию val () и вызвать событие изменения вашего элемента - НО ТОЛЬКО ЕСЛИ УКАЗАНО этим элементом.

Вы можете определить этот запрос, добавиватрибут данных (или класс и т. д.) для вашего элемента, например, так:

<!-- Add the data-trigger-change attribute -->
<input data-trigger-change class="dark-when-changed" name="test" value="123">

Затем ваша новая функция val может проверить этот атрибут.

const fnVal = $.fn.val;

$.fn.val = function(value) {
	// check if the value is actually changing
	let changed = typeof value!=='undefined' && typeof $(this)[0] !=='undefined' && value !== $(this)[0].value;
	// change the value by the standard method
	let $return = fnVal.apply(this, arguments);
	// if this element wants to trigger the change method (and it has actually changed)
	if(changed && $(this).is('[data-trigger-change]')) {
		// trigger the change method
		$(this).trigger("change");
		// return the original response
		return $return;
	}
	// return the original response without doing anything else
	return $return;
};

... и тогда вы можете написать обработчик изменений, который будет делать что угодно:

$(document).on('change','input.dark-when-changed',function(){
  $(this).addClass('dark');
});

ПРЕДУПРЕЖДЕНИЕ! Это может привести к бесконечному циклу, если вы, очевидно, измените значение в вашем обработчике изменений с помощью val ().Если вам действительно нужно, вы можете избежать этого, используя $ ('input.dark-when-change') [0] .value = 'blah';