jquery - 使用jquery使图像转 Angular

Question

我正在使用 jquery.imgr.js 在 php 文件中使图像转 Angular 。

我有以下代码从数据库生成图像。

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

波纹管是使图像 Angular 变圆的脚本

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

它可以工作，但只能使第一个图像的 Angular 变圆。

1. 如何让所有图片的 Angular 变圆？
2. 有没有其他更有效的方法来使图像圆 Angular 。

谢谢

Answer 1

ID 是唯一的，您正在为许多元素设置一个 ID，因此当您将 imgr 脚本设置为在具有该 ID 的元素上运行时，它当然只会匹配一个。类可以用于许多元素。所以不是:

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

使用:

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

然后对于 javascript 使用类似于 CSS 的 class 选择器:

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