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

最初の画像をクリックすると、不透明度が設定されるようにしたいと思います。そして、2番目の画像をクリックすると、最初の画像の不透明度が終了し、2番目の画像が設定されます。

4

3 に答える 3

1

セレクターが一致し.wwないため。ww1ww2

あなたはそれを見ることができます

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 に答える