Question

我不确定如何搜索此内容：在图库页面上，我希望能够通过点击缩放而来切换原始尺寸与2x之间的图像另一个更改状态的容器中的按钮（表示您可以根据图像div当前状态放大或缩小）

我通过点击或按钮切换图像，但我不知道如何切换按钮。

感谢。

Answer 1

您可以使用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>

同时在1个容器中切换2个div +在另一个容器中切换2个div

1 个答案: