是否可以在 JQuery 中执行“.value +=”？答案

【问题标题】：Is it possible to do ".value +=" in JQuery?是否可以在 JQuery 中执行“.value +=”？
【发布时间】：2010-11-16 11:38:06
【问题描述】：

经典的javascript：

var myvar = document.getElementById("abc");
abc.value += "test";
abc.value += "another test";

jquery：

$("#abc").val($("#abc").val()+"test");
$("#abc").val($("#abc").val()+"another test");

有没有办法让我的 Jquery 更漂亮，也许可以使用隐藏的 += 函数？我知道 .val() 不是属性，但我觉得必须有一种方法可以让这段代码看起来更漂亮......

这样的东西会很棒：

 $("#abc").valueAttribute += "test"
 $("#abc").val().content += "test"
 $("#abc").val().add("test")

【问题讨论】：

小心使用.value 的任何解决方案（包括我回答的第一部分）。它仅适用于 <input> 元素。如果 abc 变成了<textarea>，那么你总有一天会拔掉头发。
是的，我知道，它只适用于输入元素:)
Append text to input field的可能重复
我希望 Stack Overflow 有一个功能，即旧已接受答案的作者可以建议将复选标记移动到较新的答案。在这种情况下，Felix 的答案更好。
@PatrickMcElhaney 我将接受的答案更改为 Felix 的 :)

标签： javascript jquery

【解决方案1】：

我从来没有遇到过这样的事情，但这并不意味着它不存在。

我通常只是将 val() 存储在一个临时变量中并对其进行操作，然后在单独的行中调用 val(temp)。它将操作扩展到三行或更多行，但它仍然比 IMO 的 .val(.val() + "") 更具可读性。如果您要对值执行更复杂的表达式，它的扩展性也比 += 更好。

var temp = $(".abc").val();
temp += "test";
$(".abc").val(temp);

【讨论】：

没错，它会更好看。我不担心缩放，因为它是一个非常简单的函数，没有理由让它发展太多。

【解决方案2】：

你可以回到原来的 DOM 元素。

 $("#abc").get(0).value += "test";

否则，您必须编写一个插件

 $.fn.appendVal = function (newPart) {
   return this.each(function(){ $(this).val( $(this).val() + newPart); });
 };

 $("#abc").appendVal("test");

【讨论】：

插件是不错的解决方案，但它不应该返回 this.each(function(){ $(this).val( $(this).val + newPart); }); --- 保留链能力并在需要时应用于多个元素？
是的，gnarf，这样好多了。谢谢！我用你的代码重写了插件。
酷 - 然后删除我的答案！
对插件的最后一条评论...返回 this.each 而不是 $(this).each -“this”将是一个 jquery 对象 - 无需再次通过 jquery 函数传递它.

【解决方案3】：

$() 返回一个选择；它不返回实际结果对象（尽管在实践中，它只是返回实际对象的列表）。如果你想改变对象的.value 属性，你可以这样做：

$('.abc').each(function(){ this.value += foo; });

如果您愿意，可以创建对选择进行操作的函数，例如 .add()，可以这样实现：

jQuery.fn.extend({ add: function(k,v) { this[k](this[k]()+v); } });

然后可以这样使用：

$('.abc').add('val', foo);

...但我不认为这比使用 $().each() 更好

【讨论】：

【解决方案4】：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

    (function($){
        $.fn.valInc = function(vadd)
        {
            var val = $(this).val() + '' + vadd;
            $(this).val(val);
        }
    })(jQuery);

    $(function(){
        $("#tst").valInc('test 2');
    });

</script>
</head>
<body>
<input id='tst' value="test" />
</body>
</html>

【讨论】：

【解决方案5】：

从 jQuery 1.4 开始，可以将一个函数传递给.val()，它将当前值作为第二个参数：

$("#abc").val(function(i, val) {
    return val + "test";
});

【讨论】：