Href:当前DIV中的目标ID

Href: Target ID in Current DIV

本文关键字：目标 ID DIV 当前 Href      更新时间：2023-09-26

我有一个从CMS/DB生成的<li>项目列表。每个<li>都有一个<div>，其中包含一个到灯箱的链接（隐藏的<div>）。链接的目标是隐藏的<div>（#inline内容打印）的id，因此javascript插件会触发并打开灯箱。

我遇到的问题是，页面上的所有<li>都使用相同的隐藏div id生成（我可以将其更改为类）。因此，无论单击哪个<li> href，它都会为页面上的第一个<li>（id的第一个实例）调出灯箱。我需要一种方法让href从THIS div（被点击的链接所在的位置）中说"打开#inline内容打印"。

<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
<a href="#inline-content-print" class="various store-button">PRINT</a>
        <div style="display: none;" id="inline-content-print">
        CONTENT OF LIGHTBOX
        </div>
        <!-- end inline-content-print -->
</div>
</li>

如有任何建议，我们将不胜感激。

您使用的服务器端语言是什么？它是否在循环中生成这些列表项？那个循环上有索引吗？如果是这样的话，这将对你有效。

[Server language version of a for loop with an index variable named "i"]
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
<a href="#inline-content-print_[server language output of "i"]" class="various store-button">PRINT</a>
        <div style="display: none;" id="inline-content-print_[server language output of "i"]">
        CONTENT OF LIGHTBOX
        </div>
        <!-- end inline-content-print -->
</div>
</li>
[server language version of an end to the for loop]

假设你想用jQuery/Javascript来实现这一点，你可以使用这样的东西：

$(document).ready(function()
{
    $('li a.store-button').click(function(e)
    {
        var lightboxElement = $(e.currentTarget).find('div');
        lightboxElement.show(); // or whatever function you need to display
        return false;
    });
});

这是一个小脚本：

  1. 等待加载页面
  2. 查找列表元素（按li对象类型和链接上的类）
  3. 拦截点击事件
  4. 查找嵌套在单击的链接中的div元素
  5. 在目标灯箱元素上显示（或运行另一个函数）
相关文章：