用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是唯一的，您正在为许多元素设置一个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"});

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