Question

I want to blur my images by clicking on it. I am using javascript on click event for this purpose. But it is not working exactly as I want. My code is given below:

<script>
$(document).ready(function(){


  $(".ww").click(function(){
    $(this).css("opacity","0.2");
  });
});
</script>

<div class="bg">
    <div class="img ww1"><center><img src="img.jpg" /></center></div>
    <div class="canname"><center>GHULAM MUSTAFA</center></div>
    <div class="partyname"><center>JATOI &nbsp;&nbsp; <span style="color:#CCC;">NPP</span></center></div>
</div>

<div class="bg">
    <div class="img ww2"><center><img src="img.jpg" /></center></div>
    <div class="canname"><center>GHULAM MUSTAFA</center></div>
    <div class="partyname"><center>JATOI &nbsp;&nbsp; <span style="color:#CCC;">NPP</span></center></div>
</div>

I want that when I click first image then its opacity would set. And that when I click second image so the opacity of first image would finish and second image would set.

Answer 1

As the others already tried to explain, you have to use a selector which actually selects both elements, since you want to bind the event handler to both of them. $('.ww') does not select any element in the code you posted.

Toggling the opacity can be easier done when using a class:

.selected {
    opacity: 0.2;
}

Add the class to the clicked element and removed it from the element currently having the class:

$(".img").click(function(){
    $('.img.selected').add(this).toggleClass('selected');
});

Have a look at this DEMO. This should give you enough information to apply it to your situation.