jQuery：将焦点设置在离单击的链接最近的文本输入上

好吧，我有一个棘手的问题，我希望比我聪明的人能帮上忙

我正在为一个页面上有一堆小文章的客户端构建一个移动演示。每篇文章都有一个共享按钮和一个评论列表。当你点击一篇文章中的共享链接时，它会弹出一个包含几个不同选项的覆盖图。其中之一是“留言”。当您单击该链接时，它应该关闭覆盖，取消隐藏文章中的注释字段，并对其设置焦点。如果不为每篇文章制作一个单独的覆盖图，并在所有文本框中添加id（这显然是我不想做的），我想不出如何做到这一点

现在，单击注释链接取消隐藏所有注释字段，并将焦点设置为页面上的最后一个。以下是注释链接的相关脚本：

$("#comment").click(function() {
$("#overlay").toggleClass('show').toggleClass('hidden');
$(".comment-body").toggleClass('show').toggleClass('hidden');
$(".comment-body").focus();
});

---

想到的最简单的方法是添加一些识别覆盖触发元素的方法，例如向该元素添加一个类，

'overlayTrigger'

：

/* overlays */
$("a.icon-postmenu").click(function () {
    $(this).addClass('overlayTrigger');
    $("#overlay").load("inc/share-links.php");
    $("#overlay").toggleClass('show').toggleClass('hidden');
});

// selecting the 'a' element with the 'overlayTrigger' class:
$('a.overlayTrigger')
    // removing that class:
    .removeClass('overlayTrigger')
    // finding the first ancestor 'div' element:
    .closest('div')
    // finding the descendant 'input' element with the class of 'comment-body':
    .find('input.comment-body')
    // removing the 'hidden' class-name (to show it):
    .removeClass('hidden')
    // focusing that field:
    .focus();

并且，在覆盖元素的单击处理程序中，聚焦与该元素包装在同一父元素中的文本输入：

/* overlays */
$("a.icon-postmenu").click(function () {
    $(this).addClass('overlayTrigger');
    $("#overlay").load("inc/share-links.php");
    $("#overlay").toggleClass('show').toggleClass('hidden');
});

// selecting the 'a' element with the 'overlayTrigger' class:
$('a.overlayTrigger')
    // removing that class:
    .removeClass('overlayTrigger')
    // finding the first ancestor 'div' element:
    .closest('div')
    // finding the descendant 'input' element with the class of 'comment-body':
    .find('input.comment-body')
    // removing the 'hidden' class-name (to show it):
    .removeClass('hidden')
    // focusing that field:
    .focus();

顺便说一句，这是：

/* overlays */
$("a.icon-postmenu").click(function () {
    $(this).addClass('overlayTrigger');
    $("#overlay").load("inc/share-links.php");
    $("#overlay").toggleClass('show').toggleClass('hidden');
});

可以重写，以避免调用

toggleClass（）

两次：

/* overlays */
$("a.icon-postmenu").click(function () {
    $(this).addClass('overlayTrigger');
    $("#overlay").load("inc/share-links.php");
    $("#overlay").toggleClass('show hidden');
});

编辑以纠正我的错误，将您自己预先存在的代码与我自己的代码放在一起，尝试做同样的事情。现在删除，给出：

$("#comment").click(function () {
    $("#overlay").toggleClass('show').toggleClass('hidden');
    $('a.overlayTrigger').removeClass('overlayTrigger').closest('div').find('input.comment-body').toggleClass('hidden').focus();
});

参考资料：

---

您发布的演示不容易编辑，为什么我们必须使用elements inspector，而您可以准备一些代码并将其放入一些or中？好的，这是我第一次尝试，希望我做对了。感谢您提供的切换提示，我对jQuery有点陌生。小提琴现在几乎可以用了。当你点击评论链接时，它会取消隐藏所有的评论框（不仅仅是你想评论的文章中的评论框）。一个是在添加注释后，输入不会被隐藏和重置。但更大的问题是：在第一篇文章中添加评论。然后对第二篇文章重复这个过程，但要有不同的注释。它不会发布新的评论，而是再次发布相同的评论。