Question

有没有办法在jQuery中扩展val（）函数。

基本上，我想要做的是设置一个类变量，如果内容被动态输入到输入中。

通常会像

那样

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

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

Answer 3

你可以这样做：

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");
    }
});

无论何时更改值，都会调用传递给更改的函数 - 以编程方式或由用户（see documentation）更改。通过这种方式，代码变得更具可读性和可理解性，使调试更容易。

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-changed'）[0] .value ='blah';

你能在jQuery中扩展val（）函数吗？

4 个答案: