1

这是代码：

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

请给我建议。

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

如果有的话，请提供其他建议....谢谢。

4

3 回答 3

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

点击时会在选中和未选中状态之间来回切换

于 2013-06-29T09:12:46.383 回答
0

尝试这个：

<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>
于 2013-06-29T09:13:31.073 回答
0

我猜你尝试实现一个切换动作。所以你应该检查它是否被选中然后先取消选中而不是检查它。这里是你想要实现的。 提琴手演示

        ....

        if($this.hasClass("selected")) {
             $this
                 .removeClass("selected")
                 .find(".check")
                 .remove();
        }
        else {
             $this
                 .addClass("selected")
                 .find(".check")
                 .remove();
           ....
于 2013-06-29T10:10:15.883 回答