Question

好吧，我有点狡猾，我希望比我更聪明的人可以帮忙。

我正在为一个客户端构建移动演示，该客户端在页面上有一堆迷你文章。每篇文章都有一个分享按钮和一个评论列表。当您单击文章中的共享链接时，它会弹出一个带有几个不同选项的叠加层。其中一个是“发表评论”。当您单击该链接时，它应该关闭叠加层，取消隐藏文章中的注释字段，并将焦点设置在它上面。我不知道如何在不为每篇文章制作单独的叠加层的情况下如何做到这一点，并将id添加到所有文本框中（显然我不想这样做）。

Demo link

Fiddle

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

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

Answer 1

最简单的方法是添加一些识别叠加触发元素的方法，例如向该元素添加一个类'overlayTrigger'：

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

并且，在overlay元素的click处理程序中，焦点文本输入包含在与该元素相同的父元素中：

// 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();

JS Fiddle demo

顺便说一下，这个：

/* 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');
});

JS Fiddle demo

编辑纠正我 - 错误地 - 留下你自己的预先存在的代码，与我自己一样，试图做同样的事情。现在删除，给予：

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

JS Fiddle demo

参考文献：

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

1 个答案: