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>

その1ブロックの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

他の回答で述べたように、リンクにクラスを追加することは良い解決策です。ただし、したくない、またはできなかった場合は、「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;
});​

これがどのように機能するかを示すjsfiddleの例を投稿しました。