当您点击它们时，在两个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）