用jquery製作圖像角落

Question

我使用jquery.imgr.js在php文件中製作圖像角落。

我有從數據庫生成圖像的波紋管代碼。

<?php 
for($i=1;$i<=5;$i++) 
{ 
?> 
<img id="hero" src="art/<?=$getArtistsId[$i];?>" height="75px" width="98px"/> 
<?php 
} 
?> 

波紋管是腳本，使圖像邊角圓

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#hero").imgr({size:"2px",radius:"10px"}); 
    }) 
    </script> 

它的工作原理，但只能使第一圖像邊角圓不是全部。

1. 如何使所有圖像角落圓？
2. 是否有任何其他擊球手和有效的方法來使圖像成爲圓角。

感謝

Answer 1

的ID是唯一的，你那麼當然很多元素，當你設置imgr腳本，以使用該ID將只匹配一個元素上運行設定的ID。類可以用於許多元素。因此，而不是：

<img id="hero" src="art/<?=$getArtistsId[$i];?>" height="75px" width="98px"/> 

用途：

<img class="hero" src="art/<?=$getArtistsId[$i];?>" height="75px" width="98px"/> 

然後在JavaScript中使用的class選擇它類似於CSS：

$(".hero").imgr({size:"2px",radius:"10px"}); 

Answer 2

而不是添加和id在循環，添加一個共同的class。

<img class="hero" src="art/<?=$getArtistsId[$i];?>" height="75px" width="98px"/>

$(".hero").imgr({size:"2px",radius:"10px"});

Answer 3

添加類後，爲什麼不？...

.hero img{ 
    border-radius: 10px; 
}