javascript - 焦点仅显示一个元素

Question

我有一个简单的问题:

我有一个表格:

<form>
    <textarea type="text" name="comment_text" class="comment-input"></textarea>
    <div class="remaining"></div>
    <input type="submit" class="button comment-button" />
</form>

现在，当textarea(.comment-text)聚焦时，我希望使用 jQuery 显示提交按钮(.comment-button).

$(document).ready(function() {
    //display the comment button when the comment textarea is focused
    $('.comment-input').focus(function() {
        $('.comment-button').fadeIn(800);
    });
});

这很好用。 问题是我的表单位于foreach循环中，当我聚焦一个文本区域时，所有按钮都会被选中。所以我尝试使用“this”关键字来做到这一点，如下所示:

$(document).ready(function() {
       //display the comment button when the comment textarea is focused
        $('.comment-input').focus(function() {
            $(this).find('.comment-button').fadeIn(800);
        });
    });

但这不起作用。在尝试了太长时间之后，我决定我不会说足够的 jQuery 来完成这个简单的任务，并向知情人士寻求帮助!
提前谢谢!

Answer 1

这是因为按钮是文本区域的同级元素

$(this).siblings('.comment-button').fadeIn(800);