如何使 js 與特定的 html 塊一起工作？

Question

我有以下js代碼

$(function () {
 "use strict";

var maxText = $("textarea").attr("maxlength"),
    
    ourMessage = $(".message");

ourMessage.html('<span>' + maxText + '</span> Characters Remaining');

$("textarea").keydown(function () {
   
    var textLength = $(this).val().length,
        
        remText = maxText - textLength;
    
    ourMessage.html('<span>' + remText + '</span> Characters Remaining');
    
});


 $("textarea").keyup(function () {
   
    var textLength = $(this).val().length,
        
        remText = maxText - textLength;
    
    ourMessage.html('<span>' + remText + '</span> Characters Remaining');
    
}); });

以及以下 html 代碼片段：

    <div class="form-group">
        <textarea id="field" placeholder="Type Here" maxlength="3000" rows="10" cols="40"></textarea>
        <div class="message"></div>
    </div>

它工作正常。 但是我在同一頁面上需要不止一個 html 片段，而且我不知道如何更改代碼，因此<div class="message"></div>僅在使用“它的” textarea時才會更改。

Answer 1

假設 div 總是直接在 textarea 之后，您可以簡單地調用 textarea 上的next方法來獲取 div。