一些Javascript函数在WAMP上不起作用

问题描述

我编写了一个javascript函数，该函数根据单击的按钮来更改元素的背景图像。所有图像均存储在单独的文件夹中。它可以在localhost上正常运行，但是当我在localhost上运行页面时，该特定函数不再起作用，所有其他javascript函数均正常运行。我尚未在该页面上实现php，所以我不确定是什么问题。

function changeBG(btnID){
    var card = document.getElementById('edit');
    if(btnID == 'btn1')
        card.style.backgroundImage = "url('/images/1.JPG')";
    else if(btnID == 'btn2')
        card.style.backgroundImage = "url('/images/2.jpg')";
    else if(btnID == 'btn3')
        card.style.backgroundImage = "url('/images/3.jpg')";
    else if(btnID == 'btn4')
        card.style.backgroundImage = "url('/images/4.jpg')";
}

.cardImage{
    height: 15rem;
    width: 30rem;
    border-radius: 30px;
    background: #a4bac0;
    background-image: url('');
    background-position: center;
}

<div class="cardImage" id="edit">
    <h5>Card</h5>
</div>
<div class="options">
    <h6>Options</h6>
    <button class="op" id="btn1" onclick="changeBG(this.id);">1</button>
    <button class="op" id="btn2"  onclick="changeBG(this.id);">2</button>
    <button class="op" id="btn3"  onclick="changeBG(this.id);">3</button>
    <button class="op" id="btn4"  onclick="changeBG(this.id);">4</button>
    <button class="op" id="save">Save</button>
</div>

解决方法

我最终弄清楚了它，由于某种原因，除非您硬刷新页面，否则对CSS的实时更改不会显示在localhost上！所以我在选择选项时编辑了javascript以刷新div。如果有人好奇，请像下面这样。感谢您的建议：）

$("card").load("customize.php");