如何將jQuery JavaScript的應用到多個<a>標籤

我有這樣的標籤：
<a id="link1" runat="server" href="http://www.selab.isti.cnr.it/ws-mate/example.pdf" title="PDF">Open iFrame</a>
此鏈接打開包含PDF文件與該JavaScript的iframe一個jQuery用戶界面對話框：
如何將jQuery JavaScript的應用到多個<a>標籤

<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。有幫助嗎？

來源

2012-06-26 zarichney

這些答案都需要標記更改，如果您不想更改標記，請使用我的代碼。 '$（'a [id^= link]'）'將匹配所有以「link」開頭的「A」元素並應用點擊功能。所以如果你有'link1' - 'link87'，從1到87的所有鏈接都會有一個點擊功能。 – Ohgodwhy

添加類的<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>

來源

2012-06-26 14:34:38

還有第二個問題。我如何添加一個到這個jQuery對話框？ – zarichney

我不確定你是否可以添加一個''，因爲它是一個服務器端標記。但是你想在哪裏添加它？ –

iframe下 – zarichney

賦予所有錨點標記相同的類別，然後按類別選擇它們。

<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類的所有錨標籤。

來源

2012-06-26 14:33:01

使用鏈路上的類和代碼適用於類名稱：

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

你可以有超鏈接的數量不受限制與同類名稱，每次點擊該類的任何鏈接時，該函數都會執行。

來源

2012-06-26 14:33:18 JROB

有第二個問題。我如何添加一個到這個jQuery對話框？ – zarichney

在其他的答案說，增加一類，以你的鏈接將是一個很好的解決方案。但是，如果你不想或不能，你可以使用'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 example顯示它是如何工作的。

來源

2012-06-26 14:54:38 joemaller

如何將jQuery JavaScript的應用到多個<a>標籤

回答

相關問題