CODEWITHSUNDEEP
javascript
kds7ap
kds7ap

Reputation: 47

Javascript image selector: prevent selecting same image again and again

This is code:

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

Please suggest me.

when i am clicking on image it is perfectly selected, but if i am clicking on it again then it is selected again and again.

Please give other suggestion also if there.... Thank you.

Upvotes: 1

Views: 142

Answers (3)

Fredrick Gauss
Fredrick Gauss

Reputation: 5166

I guess you try to implement a toggle action. So you should check if it is checked then uncheck first than check it. here what you want to achieve. Fiddler Demo

        ....

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

Upvotes: 0

Khanh TO
Khanh TO

Reputation: 48982

I guess the indicator whether an image is selected is whether it has $("#check"). If that is the case, In your code, I don't see where you deselect an image (remove the $("#check")). It always adds more and more. Update your code like this (remember to assign a class check to your #check as we will use this class to look for the clones)

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

When you click, it will switch back and forth between selected and unselected states

Upvotes: 1

Bhushan
Bhushan

Reputation: 6181

Try This: 

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

Upvotes: 0

Related Questions