同时切换一个容器中的两个div+另一个容器中的两个
同时切换一个容器中的两个div+另一个容器中的两个
提问于 2013-03-01 18:20:10
我不知道该如何搜索:在图片库页面上，我希望通过单击原始大小与2x之间的图像(，但也可以单击)，单击另一个更改状态的容器中的缩放按钮(指示您可以放大或缩小图像div当前状态)。
我甚至通过点击图片或按钮来切换图像，但我不知道如何也切换这个按钮。
谢谢。
回答 1
Stack Overflow用户
发布于 2013-03-01 18:41:06
您可以使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15164316
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号