1

これを検索する方法がわかりません：ギャラリーページで、画像をクリックするだけでなく、状態を変更する別のコンテナのズームボタンをクリックして、元のサイズと2倍の間で画像を切り替えられるようにしたい（あなたを示す）画像 div の現在の状態に応じてズームインまたはズームアウトできます)

画像またはボタンをクリックして画像を切り替えることはできましたが、ボタンを切り替える方法もわかりません。

ありがとう。

4

1 に答える 1

0

jquery を使用できますtoggleClass()。例http://jsbin.com/uhiguv/1/edit

またhasClass、要素を具体的にターゲットにすることもできます。例: http://jsbin.com/uhiguv/2/edit

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .image.active{width:64;height:64;}
  .active{border:2px solid black;}
</style>
</head>
<body>

  Click the image or the button<br><br>

  <img 
    class="ctrl image"
    src="http://www.gravatar.com/avatar/f9dc5de7822b1679d7133691ec616174?s=32&d=identicon&r=PG">

  <br><button class="ctrl button">Grow</button>

<script>
  jQuery(function(){

    $('.ctrl').bind('click', function(){

      $('.ctrl').toggleClass('active');

      if ($('.ctrl.button').hasClass('active')) {
        $('.ctrl.button').text('Shrink');
      }
      else {
        $('.ctrl.button').text('Grow');
      }

    });

  });

</script>
</body>
</html>
于 2013-03-01T18:41:06.960 に答える