toggleClass不删除初始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”。您可以通过减少请求并消除与加载新图像相关的闪烁来获得性能。