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

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

        ....

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

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

3 个答案: