如何将 jquery javascript 应用于多个 <a> 标签答案

【问题标题】：How to apply jquery javascript to multiple <a> tags如何将 jquery javascript 应用于多个 <a> 标签
【发布时间】：2012-06-27 21:48:45
【问题描述】：

我有这个标签：
<a id="link1" runat="server" href="http://www.selab.isti.cnr.it/ws-mate/example.pdf" title="PDF">Open iFrame</a>
此链接将打开一个 jquery ui 对话框，其中包含带有此 javascript 的 PDF 文件的 iframe：

<script type="text/javascript">
$(function () {
    $("#<%=link1.ClientID%>").click(function() {
        //e.preventDefault();
        var $this = $(this);
        $('<iframe id="externalSite"  frameborder="0" src="' + this.href + '" />').dialog({
            title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
            autoOpen: true,
            width: 700,
            height: 600,
            modal: true,
            resizable: true,
            overlay: {
                opacity: 0.5,
                background: "black"
            }
        }).width(650).height(550);
        return false;
    });
});
</script>

但我需要将这段代码应用到多个标签（链接的数量可以达到几十个）。我知道如何在我的代码中使用循环创建这些链接，但我不知道如何让每个链接与指定打开的 PDF 一起动态工作。帮忙？

【问题讨论】：

这些答案都需要更改标记，如果您不想更改标记，请使用我的代码。 $('a[id^=link]') 将匹配所有以“链接”开头的“A”元素并应用点击功能。所以如果你有link1 - link87，那么从1到87的所有链接都会有点击功能。

标签： jquery pdf iframe dialog

【解决方案1】：

在链接上使用一个类并将代码应用于类名：

<a id="link1" class="changethis" runat="server" href="http://www.selab.isti.cnr.it/ws-mate/example.pdf" title="PDF">Open iFrame</a>

然后将您的 javascript 更改为：

<script type="text/javascript">
$(function () {
    $(".changethis").click(function() { // Use the CLASS here, not the ID
        //e.preventDefault();
        var $this = $(this);
        $('<iframe id="externalSite"  frameborder="0" src="' + this.href + '" />').dialog({
            title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
            autoOpen: true,
            width: 700,
            height: 600,
            modal: true,
            resizable: true,
            overlay: {
            opacity: 0.5,
            background: "black"
        }
    }).width(650).height(550);
    return false;
});
});
</script>

您可以拥有无限数量的具有相同类名的超链接，并且每次单击该类的任何链接时都会执行该函数。

【讨论】：

有第二个问题。我如何添加一个

【解决方案2】：

在从服务器渲染时向<a> 标签添加一个类，例如class="iframelink"

<script type="text/javascript">
$(function () {
    $(".iframelink").click(function() {
        //e.preventDefault();
        var $this = $(this);
        $('<iframe id="externalSite"  frameborder="0" src="' + this.href + '" />').dialog({
            title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
            autoOpen: true,
            width: 700,
            height: 600,
            modal: true,
            resizable: true,
            overlay: {
                opacity: 0.5,
                background: "black"
            }
        }).width(650).height(550);
        return false;
    });
});
</script>

【讨论】：

有第二个问题。我如何添加一个
我不确定您是否可以添加 <asp:button>，因为它是服务器端标签。但是你想在哪里添加呢？
它是如何渲染的，但是是的，你可以添加。如果将它添加到服务器端的代码中会发生什么？它是否显示在浏览器中？ HTML是如何形成的？
没有html，只有一个带有javascript的按钮。所以我不能从后面的代码访问这个对话框

【解决方案3】：

给所有锚标签同一个类，然后按类选择它们。

<a class="thelink" runat="server" href="http://www.selab.isti.cnr.it/ws-mate/example.pdf" title="PDF">Open iFrame</a>

和js：

<script type="text/javascript">
$(function () {
    $(".thelink").click(function() {
        //e.preventDefault();
        var $this = $(this);
        $('<iframe id="externalSite"  frameborder="0" src="' + this.href + '" />').dialog({
            title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
            autoOpen: true,
            width: 700,
            height: 600,
            modal: true,
            resizable: true,
            overlay: {
                opacity: 0.5,
                background: "black"
            }
        }).width(650).height(550);
        return false;
    });
});
</script>

这一块js会影响所有thelink类的锚标签。

【讨论】：

【解决方案4】：

正如其他答案中所述，向您的链接添加一个类将是一个很好的解决方案。但是，如果您不想或不能，您可以使用“结束于”选择器来仅抓取您的 PDf 链接。

// use the 'ends with' selector on the href attribute
$('a[href$=pdf]').click(function() {
    // do your stuff here, using $(this) to reference the clicked link attributes
    alert($(this).attr('id'));
    return false;
});

我发布了一个jsfiddle example，展示了它是如何工作的。

【讨论】：