-2

我想通过单击它来模糊我的图像。为此，我在点击事件上使用了 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>

我希望当我单击第一张图像时，它的不透明度会设置。并且当我单击第二张图像时，第一张图像的不透明度将完成，第二张图像将设置。

4

3 回答 3

1

因为选择器.ww不匹配ww1and ww2。

你可以看到

console.log($(".ww").length);

使用普通类img或添加类ww。

于 2013-01-24T22:56:29.683 回答
1

正如其他人已经尝试解释的那样，您必须使用实际选择两个元素的选择器，因为您希望将事件处理程序绑定到它们。$('.ww')不会选择您发布的代码中的任何元素。

使用类时可以更轻松地切换不透明度：

.selected {
    opacity: 0.2;
}

将类添加到单击的元素，并将其从当前具有该类的元素中删除：

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

看看这个演示。这应该为您提供足够的信息以将其应用于您的情况。

于 2013-01-24T23:25:09.017 回答
-1 
<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>
于 2013-01-24T22:59:56.200 回答