1

我不知道如何搜索：在画廊页面上，我希望能够通过单击图像在其原始大小和 2x 之间切换图像，也可以通过单击另一个容器中更改状态的缩放按钮（表明您可以根据图像 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 回答