如何使 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。