Я хочу размыть свои изображения, нажав на него. Я использую JavaScript для события клика для этой цели. Но это не работает так, как я хочу. Мой код приведен ниже:

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

Я хочу, чтобы, когда я нажимал на первое изображение, тогда устанавливалась его непрозрачность. И это, когда я нажимаю второе изображение, чтобы непрозрачность первого изображения закончилась, и второе изображение установилось.

-2
user2009243 25 Янв 2013 в 02:53

2 ответа

Лучший ответ

Как уже пытались объяснить другие, вы должны использовать селектор, который фактически выбирает оба элемента, поскольку вы хотите связать обработчик событий с ними обоими. $('.ww') не выбирает ни одного элемента в опубликованном вами коде.

Переключение непрозрачности может быть легче сделано при использовании класса:

.selected {
    opacity: 0.2;
}

Добавьте класс к элементу clicked и удалите его из элемента, который в данный момент имеет класс:

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

Ознакомьтесь с этой ДЕМО . Это должно дать вам достаточно информации, чтобы применить ее к вашей ситуации.

1
Felix Kling 24 Янв 2013 в 23:25
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

                $('#my').toggle(
                  function(event) {
                    $(event.target).css('opacity',0.4);
                  },
                  function(event) {
                    $(event.target).css('opacity',1.0);
                  }
                );

        });
    </script>

  </head>
  <body>
    <body>
        <div id="my">asdf</div>
    </body>
</html>
-1
wcraft 24 Янв 2013 в 22:59