Question

我有一个从CMS / DB生成的<li>项目列表。每个<li>都有一个<div>，其中包含指向灯箱的链接（隐藏<div>）。该链接定位隐藏<div>的ID（#inline-content-print），以便javascript插件触发并拉起灯箱。

我遇到的问题是页面上的所有<li>都生成了相同的隐藏div ID（我可以将其更改为类）。因此无论点击哪个<li> href，它总是拉出页面上第一个<li>的灯箱（id的第一个实例）。我需要一种方法让href从这个div（被点击的链接所在的那个）中说“open＃inline-content-print”。“

<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>

非常感谢任何建议。

Answer 1

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

[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]

Answer 2

假设您想使用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;
    });
});

这是一个小脚本：

等待页面加载。
查找列表元素（按li对象类型和链接上的类）
截取点击事件。
查找嵌套在已点击的链接中的div元素。
在目标灯箱元素上显示（或运行其他功能）。

Href：当前DIV中的目标ID

2 个答案: