Question

我有一个id为“art”的div。这个div应该有背景“S1_img1.jpg”。在div下面有一个按钮，当我点击它时，背景图像必须改为“S1_img2.jpg”。

当我再次点击它时，它必须改为“S1_img3.jpg”，它会继续这样。但是，img4是最后一个。当div背景当前设置为img4并且再次单击该按钮时，它必须更改回img1。

我试图通过使用javascript来实现这一点，但我无法让它工作。

1）当我使用下面的代码时，即使我确定图像路径正确，图像也不会显示为背景。

<script type="text/javascript">
document.getElementById("art").style.backgroundImage = "url(content/art/S1/S1_img1.jpg)";</script>

2）如何点击我所描述的按钮时，如何改变背景呢？

此时按钮的onClick执行javascript函数“count（）;”。

<script type="text/javascript">
var img = 1;

function count() {
    img = img + 1;
    document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img1.jpg)";
}
</script>

Answer 1

您可以使用该条件

<script type="text/javascript">
var img = 1;

function count() {
img = img + 1;
document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img"+img+".jpg)";
if (img==4) img=0;
}
</script>

Answer 2

如果您使用HTML5，则可以使用自定义属性（请参阅this answer）。它比使用全局变量更好，这样你就可以管理多个元素的背景。

<div style="background-image:url(content/art/S1/S1_img1.jpg);cursor:pointer"
     onclick="toggleBackgroundImage(this)">a</div>

<script type="text/javascript">
function toggleBackgroundImage(element) {
    var idbgrank = parseInt(element.getAttribute("data-idbgrank"));
    idbgrank = idbgrank ? idbgrank + 1 : 2;
    element.setAttribute("data-idbgrank", idbgrank)
    if (idbgrank > 4) return;
    element.style.backgroundImage = "url(content/art/S1/S1_img" + idbgrank + ".jpg)";
    alert(element.style.backgroundImage); //remove it ;)
}
</script>

请参阅小提琴：http://jsfiddle.net/g40hL0jc/3/

（通过alert（）调用可以看到结果，您只需将其删除）。

单击更改背景图像

2 个答案: