同時在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個

回答

相關問題