javascript - ggggleClass 不删除初始 div img 源

Question

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

<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> 

我将初始图像设置为 div，将第二个图像设置为类:

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

这可能不是最好的设置方法，但'=我对此还很陌生。

Answer 1

如果您尝试切换图像，请尝试以下技术:

我对您现有的 HTML 结构没有清楚的了解，因此这只是作为示例。

Live Demo

HTML

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

JS

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

CSS

.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'); 
}

注意:要消除初始图像加载之间的闪烁，请使用“sprite image ”。您将通过减少请求并消除与加载新图像相关的闪烁来提高性能。