Tham khảo đối tượng bộ chọn ngay lập tức với jQuery?

Question

Tôi đang cố gắng để tìm hiểu một số jQuery, và tôi thiết lập một trang thử nghiệm với đoạn mã sau:

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

Ý tưởng là tôi có thể đặt một cái gì đó trong textarea và nhấp vào một trong hai "mã hóa" hay "giải mã", và nó sẽ thoát hoặc không nhìn thấy những gì tôi đưa vào vùng văn bản.

Mã này hoạt động tốt, nhưng câu hỏi của tôi phải làm với cách tôi thay đổi giá trị của vùng văn bản. Trong mã của tôi, tôi đang chọn giá trị textarea hai lần: một lần để (un) thoát nó, và một lần nữa để thay đổi giá trị. IMO điều này có vẻ khó khăn và có thể không cần thiết. Tôi nghĩ có lẽ tôi có thể làm một cái gì đó giống như thay vì điều này:

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

Nhưng this dường như đề cập đến đối tượng của liên kết tôi nhấp, không phải là chọn #randomString, như vậy là có một số câu thần chú khác tôi có thể sử dụng để tham khảo mà $('#randomString')?

Answer 1

Câu trả lời ngắn gọn, nếu tôi hiểu bạn một cách chính xác, là không. Không có cách nào để tham chiếu đến $('#randomString') nơi bạn đang nói đến. Nó chỉ là một tham số cho phương thức val, vì vậy nó chỉ là cú pháp JavaScript đơn giản, không có jQuery "ma thuật".

Để hoàn thành nhiệm vụ trong tầm tay và làm cho đoạn code sạch hơn và ít phiền phức, tôi sẽ tiết kiệm ra khỏi đối tượng jQuery cho #randomString vì vậy bạn không cần phải liên tục tạo nó:

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

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

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

Answer 2

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

Điều này không nhận được đối tượng bạn muốn. Đó là một cách hiệu quả tương đương để làm điều này:

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

this chỉ có nghĩa một cái gì đó khác nhau khi bạn bắt đầu một phạm vi mới với định nghĩa hàm.

jQuery không cung cấp các loại chức năng với một tùy chọn gọi lại:

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

Tham số thứ hai là giá trị hiện tại của nguyên tố này; giá trị trả lại đặt giá trị mới cho phần tử.

Answer 3

Bạn có thể thử này

$(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 4

Bạn có thể làm cho nó một chút chung:

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

Sau đó, các cuộc gọi sau đây là đủ:

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