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

我不确定如何搜索此内容：在图库页上我希望能够通过单击它在原始大小和2x之间切换图像而且通过单击另一个容器中的变焦状态（表示您可以放大或缩小与图像div的当前状态一致）的缩放按钮同时在1个容器中切换2个div +在另一个容器中切换2个

我得到尽可能通过单击它或按钮来切换图像但我不知道如何切换按钮。

谢谢。

2013-03-01 Rene Alejandro Hernandez

你能否包含你的代码？和/或你试过的东西 – 2013-03-01 18:37:50

我编辑了一些我之前找到的代码，并且得到了我想要的效果！我不确定这个解决方案有多好，任何改进建议都会很酷。但我现在感到高兴。 [http://jsfiddle.net/Qb9rS/1/](http://jsfiddle.net/Qb9rS/1/） – 2013-03-01 21:54:26

您可以使用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-01 18:41:06

太棒了！这是我想要的，但我怎么能用这个按钮作为图像？ – 2013-03-01 18:58:22

使用css'.button.active {background-image：url（'/ img/shring.jpg'）'和'.button {background-image：url（'/ img/grow.jpg'）' – 2013-03-01 22:02:40

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

回答

相关问题