Question

我在网上找到了一些Javascript代码，用于在点击它们时切换两个图片，如example所示。

现在我想知道如何使用div来实现相同的结果，而图片在div中。

小图像和大图像都将是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）

点击它们时，在两对div夫妻之间切换

1 个答案: