當您點擊它們時，在兩個div對之間切換

Question

我在網上找到了一些用於在兩個圖片之間切換的Javascript代碼，如在此example中點擊它們時。

現在我不知道如何實現使用divs與divs內的圖片相同的結果。

無論是小圖像還是大圖像都會成爲另一個div內形成邊框的div的背景圖像（我需要這樣做才能設置圖像的內邊界半徑，而我可以當我使用內部div並設置其邊框半徑）。所以，我有：

<div class="bordersmallpicture"><div class="smallpicture"></div></div> 

和

<div class="borderlargepicture"><div class="largepicture"></div></div> 

我怎麼能告訴Javascript來這兩個DIV夫婦，而不是圖像之間進行切換？這裏是JavaScript代碼，我發現圖像：

<script> 
var imageURL = "small-picture.png"; 

if (document.images) { 
var smallpicture = new Image(); 
smallpicture.src = "small-picture.png"; 

var largepicture = new Image(); 
largepicture.src = "large-picture.png"; 
} 

function changeImage() { 
if (document.images) { 
    if (imageURL == "large-picture.png") {imageURL = "small-picture.png";} 
    else {imageURL = "large-picture.png";} 

    document.myimage.src = imageURL; 
} 
} 
</script> 

和HTML部分：

<a href="#" onclick="changeImage();"><img src="small-picture.png" name="myimage" title="Click to resize" alt="tree"></a> 

誰能給我一個提示如何編輯此代碼，以上面提到的DIV夫妻之間切換？或者在處理div時需要一個全新的代碼？

Answer 1

你只需要切換類。在類中使用的圖像作爲CSS背景看running example：

<div id="border-div" class="bordersmallpicture"> 
    <div id="image-div" class="smallpicture"></div> 
</div> 

的的JavaScript是：

<script> 
function changeImage() { 
    var currentClass = document.getElementById('border-div').className; 
    if(currentClass == 'borderlargepicture') { 
    document.getElementById('border-div').className = 'bordersmallpicture'; 
    document.getElementById('image-div').className = 'smallpicture'; 
    } else { 
    document.getElementById('border-div').className = 'borderlargepicture'; 
    document.getElementById('image-div').className = 'largepicture'; 
    } 
} 
</script> 

，如果你希望使用JavaScript很多，我建議使用jQuery這將使得代碼更易於：

<script> 
function changeImage() { 
$('#border-div').toggleClass('bordersmallpicture').toggleClass('borderlargepicture'); 
$('#image-div').toggleClass('smallpicture').toggleClass('largepicture'); 
} 
</script> 

toggleClass接通/斷開一個類（這裏是example）