Keyup 事件仅在第一个文本区域触发

Question

textarea输入和button附加到所有已发布的文章和我的数据库中。从技术上讲，它们就像"评论"和"回复"框和按钮。

问题是我将keyup函数应用于textarea，以便在textarea为空时按钮保持停用状态。keyup事件仅适用于第一个评论/回复textarea。如果我使用class则所有评论中的所有按钮都会被激活。

请帮忙，我希望我的请求足够清楚。

<form>
<textarea name="reply" class="reply" id="reply"  placeholder="React to this" required="required">
<button id="btn" class="btn-reply" type="submit" disabled>Reply
</form>
<script>
$('.reply').keyup(function() {
if ($(this).val() <= 0) {
$(".btn").attr('disabled', true);
} else {
$(".btn").attr('disabled', false);
}
});
</script>

Answer 1

btn是元素上的id，因此它仅适用于第一个元素id因为需要在DOM中是唯一的。您需要将其更改为类。

然后你可以使用 DOM 遍历来查找与点击按钮相关的.btn-reply，如下所示：

$('.reply').keyup(function() {
$(this).next('.btn-reply').prop('disabled', $(this).val().trim().length == 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<textarea name="reply" class="reply" id="reply" placeholder="React to this" required="required"></textarea>
<button id="btn" class="btn-reply" type="submit" disabled>Reply</button>
</form>

这里还有其他一些需要注意的事情。首先，您的 HTML 无效，因为您错过了textarea和button结束标记。其次，您可以通过为方法提供一个布尔值来否定对if条件的需求prop()。

Answer 2

因为您使用类，所以该类的所有按钮都会被激活。也许试试这个：

$('.reply').keyup(function(){
if($(this).val()<=0){
$(this).next().attr('disabled', true);
}else{
$(this).next().attr('disabled', false);
}
});

查看工作示例

ID 应该是唯一的，所以不要为每个按钮都使用 id="btn"，你可以更好地删除它。 您的 html 无效，所以我在示例中更改了它。也许复制粘贴错误