jquery - 如何将 jquery javascript 应用于多个标签

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

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

Answer 2

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

<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该类的所有锚标记。

Answer 3

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

Answer 4