Question

我有一个ID为“link”的链接，我使用下面的javascript在模态框中打开该链接：

#In my template I have: 
<a href="some/path" id="link">link</a>


#Then in my application.js file I have:
document.observe('dom:loaded', function() {
    $('link').observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,{title: 'some title', width: 500});            
    });
})

由于id必须是唯一的，因此这个javascript只适用于每页一个元素，所以我用它来观察我的登录链接，它对我很有帮助。到现在为止。

我想使用相同的javascript来观察多个具有类名而不是id的链接，如下所示：

<a href="link/to/some/stuff" class="link">link 1</a>
<a href="link/to/some/other/stuff" class="link">link 2</a>

当我这样做时，我无法在模态框中打开任何链接。如果我将类更改为每个链接的id，那么我可以获取列表中的第一个链接以在模态框中打开。

我尝试使用'$$'符号在我的javascript中构建一个链接数组（如下所示），但如果我这样做，那么没有一个链接正确打开

    #document.observe method removed for display purposes
    $$('link').observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,{title: 'some title', width: 500} );
    });

我的javascript技能显然很糟糕。
有谁知道如何解决这个问题？

Answer 1

您的代码只需要两次更改

 $$('.link').each(function() { observe('click', function(event) {
        event.stop();
        Modalbox.show(this.href,{title: 'some title', width: 500} );
    }}));

注意'.link'，表示它是一个类名，然后将每个函数应用于每个结果。括号可能需要调整，我现在抱着一个孩子

Answer 2

[此解决方案使用prototyejs 1.7版] 这似乎对我有用，并且每个链接都有一个id，然后...... 您可以将链接包装在specfic divs

中

<div id="content">
<a href="link/to/some/stuff" class="link">link 1</a>
<a href="link/to/some/other/stuff" class="link">link 2</a>
</div>

如果您将链接包装在div中，则此代码会触发modalBox

document.observe('dom:loaded', function() {
    var elements = $('content').select('a');
    elements.each(function(e){
        $(e.id).on("click", function(event){
            event.stop();
            Modalbox.show(this.href,{title: 'some title', width: 500} );
        });
    });
});

如果您想要页面上的所有链接，您可以更改代码以获取class =“link”的每个链接

document.observe('dom:loaded', function() {
    var elements = $$('a.link');
    elements.each(function(e){
        $(e.id).on("click", function(event){
            event.stop();
            Modalbox.show(this.href,{title: 'some title', width: 500} );
        });
    });
});

Answer 3

我试图解决同样的问题，并使用mabwi的代码进行一些小改动。

以下是我的解决方案：

$$('.link').each(function(el) { el.on('click', function(event) {
    event.stop();
    Modalbox.show(this.href,{title: 'some title', width: 500} );
})})

这对我有用，希望它也适合你。

Answer 4

您可以使用浏览器的功能来帮助自己，而不是尝试依次为每个链接分配观察者。首先，您需要确定所有链接的公共父元素...

<div id="links">
    ...
    <a href="link/to/some/stuff" class="link">link 1</a>
    <a href="link/to/some/other/stuff" class="link">link 2</a>
    ...
</div>

然后利用event delegation。

$('links').on('click', 'a.link', function(event) {
    event.stop();
    Modalbox.show(this.href,{title: 'some title', width: 500});            
});

这有利于浏览器减少要完成的工作，并且它适应添加和删除的新链接（甚至更改其类名），而无需显式分配和取消分配事件处理程序。您可能不知道链接是否会发生变化，但未来可能是一个要求，提前规划是一个很好的编码策略，而且代码也少了！

Simple Prototype.js代码用于选择具有相同类名的多个元素

4 个答案: