如何将jquery javascript应用于多个<；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>

$（函数（）{
$（“#”）单击（函数（）{
//e、 预防默认值（）；
var$this=$（this）；
$（''）。对话框({
标题：（$this.attr（'title'）？$this.attr（'title'）：'External Site'，
自动打开：对，
宽度：700，
身高：600，
莫代尔：是的，
可调整大小：正确，
覆盖：{
不透明度：0.5，
背景：“黑色”
}
}).宽度（650）、高度（550）；
返回false；
});
});

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

---

帮助？

将所有锚定标记赋予同一类，然后按类选择它们

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

$（函数（）{
$（“.thelink”）。单击（函数（）{
//e、 预防默认值（）；
var$this=$（this）；
$（''）。对话框({
标题：（$this.attr（'title'）？$this.attr（'title'）：'External Site'，
自动打开：对，
宽度：700，
身高：600，
莫代尔：是的，
可调整大小：正确，
覆盖：{
不透明度：0.5，
背景：“黑色”
}
}).宽度（650）、高度（550）；
返回false；
});
});

---

一个js块将影响链接类的所有锚定标记。

将所有锚定标记赋予相同的类，然后按类选择它们

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

$（函数（）{
$（“.thelink”）。单击（函数（）{
//e、 预防默认值（）；
var$this=$（this）；
$（''）。对话框({
标题：（$this.attr（'title'）？$this.attr（'title'）：'External Site'，
自动打开：对，
宽度：700，
身高：600，
莫代尔：是的，
可调整大小：正确，
覆盖：{
不透明度：0.5，
背景：“黑色”
}
}).宽度（650）、高度（550）；
返回false；
});
});

---

一个js块将影响链接类的所有锚定标记。

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

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

$（函数（）{
$（“.changethis”）。单击（函数（）{//在此处使用类，而不是ID
//e、 预防默认值（）；
var$this=$（this）；
$（''）。对话框({
标题：（$this.attr（'title'）？$this.attr（'title'）：'External Site'，
自动打开：对，
宽度：700，
身高：600，
莫代尔：是的，
可调整大小：正确，
覆盖：{
不透明度：0.5，
背景：“黑色”
}
}).宽度（650）、高度（550）；
返回false；
});
});

---

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

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

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

$（函数（）{
$（“.changethis”）。单击（函数（）{//在此处使用类，而不是ID
//e、 预防默认值（）；
var$this=$（this）；
$（''）。对话框({
标题：（$this.attr（'title'）？$this.attr（'title'）：'External Site'，
自动打开：对，
宽度：700，
身高：600，
莫代尔：是的，
可调整大小：正确，
覆盖：{
不透明度：0.5，
背景：“黑色”
}
}).宽度（650）、高度（550）；
返回false；
});
});

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

从服务器渲染时，将类添加到

标记，如

class=“iframelink”

$（函数（）{
$（“.iframelink”）。单击（函数（）{
//e、 预防默认值（）；
var$this=$（this）；
$（''）。对话框({
标题：（$this.attr（'title'）？$this.attr（'title'）：'External Site'，
自动打开：对，
宽度：700，
身高：600，
莫代尔：是的，
可调整大小：正确，
覆盖：{
不透明度：0.5，
背景：“黑色”
}
}).宽度（650）、高度（550）；
返回false；
});
});

从服务器进行渲染时，向

标记添加一个类，如

class=“iframelink”

$（函数（）{
$（“.iframelink”）。单击（函数（）{
//e、 预防默认值（）；
var$this=$（this）；
$（''）。对话框({
标题：（$this.attr（'title'）？$this.attr（'title'）：'External Site'，
自动打开：对，
宽度：700，
身高：600，
莫代尔：是的，
可调整大小：正确，
覆盖：{
不透明度：0.5，
背景：“黑色”
}
}).宽度（650）、高度（550）；
返回false；
});
});

如其他答案所述，在链接中添加类将是一个很好的解决方案。但是，如果您不想或不能，您可以使用“ends with”选择器仅获取您的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;
});​

---

我发布了一篇文章，展示了它是如何工作的。

如其他答案所述，在链接中添加一个类将是一个很好的解决方案。但是，如果您不想或不能，您可以使用“ends with”选择器仅获取您的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;
});​

---

我发布了一个演示它是如何工作的。

这些答案都需要更改标记，如果您不想更改标记，请使用我的co