Javascript图像选择器：防止反复选择相同的图像

这是代码：

<script type="text/javascript">
function checked(id) {
     $('#'+id).css("opacity","0.3");
     $("#check").clone().appendTo('#'+id);
     $("#check").css('display','block');
     $("#check").css('margin','-125px 0 0 75px');
     $('#'+id).css('margin','0 0 0 -1px');
}
</script>

已检查功能（id）{
$（'#'+id）.css（“不透明度”，“0.3”）；
$（“#检查”）.clone（）.appendTo（“#”+id）；
$（“#检查”）.css（'display'，'block'）；
$（“#检查”）.css（'margin'，'-125px 0 75px'）；
$（'#'+id）.css（'margin'，'0-1px'）；
}

HTML代码：

<div class="row-fluid">
   <div class="span3 mar_b"> 
      <a href="javascript:" onClick="checked('img1')" id="img1" class="img1"><img src="images/1.jpg" alt="img" /></a>
   </div>
   <div class="span3 mar_b"> 
      <a href="javascript:" onClick="checked('img2')" id="img2"><img src="images/2.jpg" alt="img" /></a> 
   </div>
   <div class="span3 mar_b"> 
      <a href="javascript:" onClick="checked('img3')" id="img3"><img src="images/silverfish.jpg" alt="img" /></a> 
   </div>
   <div class="span3 mar_b"> 
      <a href="javascript:" onClick="checked('img4')" id="img4"><img src="images/4.jpg" alt="img" /></a> 
   </div>
</div>

请推荐我

当我点击图像时，它被完美地选中了，但如果我再次点击它，它就会被一次又一次地选中

如果有，请给出其他建议。。。。

---

谢谢。

我想是否选择图像的指标是它是否有

$（“#检查”）

。如果是这样的话，在代码中，我看不到您在哪里取消选择图像（删除

$（“#检查”）

）。它总是越来越多。像这样更新您的代码（请记住为您的

#check

分配一个类

检查，因为我们将使用该类查找克隆）

当您单击时，它将在选定和未选定状态之间来回切换
我想是否选择图像的指标是它是否有
$（“#检查”）
。如果是这样的话，在代码中，我看不到您在哪里取消选择图像（删除
$（“#检查”）
）。它总是越来越多。像这样更新您的代码（请记住为您的
#check
分配一个类
检查，因为我们将使用该类查找克隆）

单击时，它将在选定和未选定状态之间来回切换
尝试以下操作：

<script type="text/javascript">
var prevID="";
function checked(id) {
    if(id!=prevID)
    {
        $('#'+id).css("opacity","0.3");
        $("#check").clone().appendTo('#'+id);
        $("#check").css('display','block');
        $("#check").css('margin','-125px 0 0 75px');
        $('#'+id).css('margin','0 0 0 -1px');
        prevID=id;
    }
}
</script>


var prevID=“”；
已检查功能（id）{
if（id！=prevID）
{
$（'#'+id）.css（“不透明度”，“0.3”）；
$（“#检查”）.clone（）.appendTo（“#”+id）；
$（“#检查”）.css（'display'，'block'）；
$（“#检查”）.css（'margin'，'-125px 0 75px'）；
$（'#'+id）.css（'margin'，'0-1px'）；
prevID=id；
}
}
试试这个：

<script type="text/javascript">
var prevID="";
function checked(id) {
    if(id!=prevID)
    {
        $('#'+id).css("opacity","0.3");
        $("#check").clone().appendTo('#'+id);
        $("#check").css('display','block');
        $("#check").css('margin','-125px 0 0 75px');
        $('#'+id).css('margin','0 0 0 -1px');
        prevID=id;
    }
}
</script>


var prevID=“”；
已检查功能（id）{
if（id！=prevID）
{
$（'#'+id）.css（“不透明度”，“0.3”）；
$（“#检查”）.clone（）.appendTo（“#”+id）；
$（“#检查”）.css（'display'，'block'）；
$（“#检查”）.css（'margin'，'-125px 0 75px'）；
$（'#'+id）.css（'margin'，'0-1px'）；
prevID=id；
}
}
我猜您试图实现切换操作。因此，您应该检查它是否已选中，然后先取消选中，然后再检查它。这就是你想要实现的目标。

我猜您试图实现切换操作。因此，您应该检查它是否已选中，然后先取消选中，然后再检查它。这就是你想要实现的目标。

$（“#”+id.find（“#check”）.remove（）$css（“不透明度”，“1”）@user2534272:您应该分配一个类并使用它来避免重复id$（'#'+id）$css（“不透明度”，“1”）@user2534272:您应该分配一个类并使用它来避免重复IDS。您的答案也是正确的，但是如果我们再次单击，则应该删除选择。谢谢，伙计。你的答案也是正确的，但如果我们再次单击，应该会删除所选内容。谢谢你，伙计。
        ....

        if($this.hasClass("selected")) {
             $this
                 .removeClass("selected")
                 .find(".check")
                 .remove();
        }
        else {
             $this
                 .addClass("selected")
                 .find(".check")
                 .remove();
           ....