Javascript图像选择器:防止一次又一次地选择相同的图像

Question

这是代码：

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

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>

请推荐我。

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

如果有，也请给出其他建议。。。。非常感谢。

Answer 1

我想图像是否被选中的指标是它是否具有$("#check")。如果是这样的话，在您的代码中，我看不出您在哪里取消选择图像（删除$("#check")）。它总是增加越来越多。像这样更新你的代码（记住给你的#check分配一个类check，因为我们将使用这个类来寻找克隆）

function checked(id) {
     $('#'+id).css("opacity","0.3");
     if ($('#'+id).find(".check").length == 0){
         $("#check").clone().appendTo('#'+id);
         $("#check").css('display','block');
         $("#check").css('margin','-125px 0 0 75px');
     }
     else {
         $('#'+id).find(".check").remove();  
     }
     $('#'+id).css('margin','0 0 0 -1px');
}

单击时，它将在选定和未选定状态之间来回切换

Answer 2

试试这个：

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

Answer 3

我猜您试图实现一个切换操作。所以你应该先检查它是否被选中，然后先取消选中，然后再检查。这里是你想要实现的。Fiddler演示

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