Javascript toggleClass不删除初始div img源

我试图在图像之间切换，但我的代码只是将一个图像放在另一个图像上，而不是删除初始图像。这就是我所拥有的：

<script>
var button = document.getElementById('box'),
    text = document.getElementById('menu');
button.onclick = function () {
    var isHidden = text.style.display == 'none';
    text.style.display = isHidden ? 'block' : 'none';
};
$("#box").click(function () {
    $(this).toggleClass("red");
});
</script> 

---

这可能不是最好的设置方法，但我对这方面还不太熟悉

如果要切换图像，请尝试以下技术：

我对您现有的HTML结构没有一个清晰的理解，所以这只是一个示例

HTML

CSS

---

注意：要消除初始图像加载之间的闪烁，请使用。通过减少请求和消除与加载新图像相关的闪烁，您将获得性能

在任何地方，您都不需要更改图像源，也要确保脚本在dom就绪的句柄中执行。您的脚本可以缩短为jQueryfunction${$box.clickfunction{$this.toggleClassred；}；}；}Hi这是我第一次使用此站点。对不起，我还不知道如何使用它。我的HTML只是一个带有和图像的div。如何在图像源与类之间切换？是否要更改图像http://gabrielamagana.com/project1/ndxz-studio/site/sample/close-eye.png 到另一个？如果你能分享html，对我们来说还是比较容易的。。。哪个元素具有类boxOne toggleClassimg2就足够了。后面的CSS将覆盖默认图像。

.close {
    width: 29px;    
    z-index: 1;
    height: 16px;
    cursor: crosshair;
   background-image: url('http://gabrielamagana.com/project1/ndxz-studio/site/sample/close-eye.png');
}

<div class='img1' id='dvImage'>&nbsp;</div>

$(function(){
    var ele = $('#dvImage');
    ele.click(function(){
        ele.toggleClass("img2");
    });
}); 

.img1, .img2{
    width:400px;    
    height:100px; 
}

.img1{
    background-image:url('http://dummyimage.com/400x150/000/fff');
}

.img2{
    background-image:url('http://dummyimage.com/400x150/000/aaa'); 
}