Question

我正在尝试学习一些jQuery，并使用以下代码设置测试页面：

<a id='encode' href='javascript: void(0)'>encode</a> |  
<a id='decode' href='javascript: void(0)'>decode</a> | 
<br/>
<textarea id='randomString' cols='100' rows='5'></textarea>

<script type='text/javascript'>
$(document.ready(function () {
  $('#encode').click(function() {
    $('#randomString').val(escape($('#randomString').val()));
  });
  $('#decode').click(function() {
    $('#randomString').val(unescape($('#randomString').val()));
  });     
});
</script>

我的想法是我可以在textarea中放置一些东西，然后单击“编码”或“解码”，它将转义或取消我放入textarea的内容。

这段代码工作正常，但我的问题与我如何更改textarea的值有关。在我的代码中，我选择了两次textarea值：一次（un）转义它，再一次改变值。 IMO这看起来很笨拙，也许没必要。我想也许我可以做这样的事情：

$('#randomString').val(escape(this));

但是this似乎是指我点击的链接的对象，而不是#randomString选择器，所以我可以使用其他一些神奇的词来引用$('#randomString')吗？ / p>

Answer 1

$('#randomString').val(escape(this));

这不会得到你想要的对象。它实际上相当于这样做：

var foo = escape(this);
$('#randomString').val(foo);

this仅在您使用函数定义启动新作用域时表示不同的内容。

jQuery确实通过回调选项提供了这种功能：

$('#randomString').val(function (idx, oldVal) {
    return escape(oldVal);
});

第二个参数是元素的当前值;返回值为元素设置一个新值。

Answer 2

你可以试试这个

$(document.ready(function () {

  $('#encode').click(function() {
    var $randomString =  $('#randomString');
    $randomString.val(escape($randomString.val()));
  });
  $('#decode').click(function() {
    var $randomString =  $('#randomString');
    $randomString.val(unescape($randomString.val()));
  });     
});

Answer 3

你可以把它变得有点通用：

$.fn.applyVal = function(func) {
    return this.each(function() {
        $(this).val( func( $(this).val() ) );
    });
};

接下来的电话就足够了：

$('#randomString').applyVal(escape);

Answer 4

简短的回答，如果我理解正确的话，那就不是。没有办法引用您所谈论的$('#randomString')。它只是val方法的一个参数，所以它只是简单的JavaScript语法，没有jQuery“魔法”。

为了完成手头的任务并使代码更清晰，更少笨重，我会为#randomString保存jQuery对象，这样你就不必继续创建它了：

$(document.ready(function () {
    var $rndStr = $('#randomString');

    $('#encode').click(function() {
        $rndStr.val(escape($rndStr.val()));
    });

    $('#decode').click(function() {
        $('#rndStr').val(unescape($rndStr.val()));
    });     
});

用jQuery引用立即选择器对象？

4 个答案: