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

Question

我编写了一个 javascript 函数，该函数根据单击的按钮更改元素的背景图像。 所有图像都存储在单独的文件夹中。 它在本地主机上正常工作，但是当我在本地主机上运行页面时，该特定功能不再起作用，所有其他 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>

Answer 1

我最终弄清楚了，出于某种原因，除非您硬刷新页面，否则对 css 的实时更改不会显示在 localhost 上！ 所以我编辑了 javascript 以在选择一个选项时刷新 div。 如果有人好奇，就像下面一样。 谢谢你的建议:)

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