Question

经典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")

Answer 1

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

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

否则，您必须编写插件

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

$()返回一个选择;它不返回实际的结果对象（虽然在实践中，它只返回实际对象的列表）。如果要改变对象的.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()

更好

Answer 5

<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>

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

5 个答案: