Question

只需点击它们即可尝试循环显示3张图像。

这是我的代码：

<script type="text/javascript">
function toggleImages(obj) {
if(obj.style.backgroundImage == "url('images/none.jpg')") {
    obj.style.backgroundImage = "url('images/iPhoneImage-300x300.jpg')";
}
else if(obj.style.backgroundImage == "url('images/iPhoneImage-300x300.jpg')"){
    obj.style.backgroundImage = "url('images/smartphoneImage-300x300.jpg')";
}
else if(obj.style.backgroundImage == "url('images/smartphoneImage-300x300.jpg')"){
obj.style.backgroundColor = "url('images/none.jpg')";
}
}

 </script>

<div onclick="toggleImages(this);" id="arrow1" style="background-image:url(images/none.jpg); display:block; width:300px; height:300px"></div>

如果我改变没有图像的背景颜色而不是背景图像，这会让我认为它与网址有关。

感谢寻求帮助

Answer 1

我的javascript控制台使用双引号输出 url（“images / none.jpg”），如果您使用单引号进行检查，则必须使用其他内容进行检查。一种方式（不那么聪明）是：

   function toggleImages(obj) {
    var tmp=obj.style.backgroundImage.replace(/url\(('|")/,'').replace(/('|")\)/,'')
    if(tmp == "images/none.jpg") {
        obj.style.backgroundImage = "url('images/iPhoneImage-300x300.jpg')";
    }else if(tmp == "images/iPhoneImage-300x300.jpg"){
        obj.style.backgroundImage = "url('images/smartphoneImage-300x300.jpg')";
    }else if(tmp == "images/smartphoneImage-300x300.jpg"){
        obj.style.backgroundImage = "url('images/none.jpg')";
    }
    console.log(tmp);
}

Answer 2

您可以更换单引号和双引号另请注意，您的代码有一个obj.style.backgroundColor，它应该是obj.style.backgroundImage。

{{1}}

使用Javascript多次更改背景图像

2 个答案: