Question

我正在尝试通过单击按钮来更改网站的背景颜色，但是无法正常工作。当我单击该按钮时，会更改颜色，然后立即又变回原始颜色，它不想保留更改。

$(document).ready(function(){
        $("button").click(function(){
            $("div").css("background", "grey");
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> Change Theme</button>

Answer 1

在按钮点击中添加return false。该按钮触发回发（Form Post）。然后，对UI所做的所有更改都将丢失。这就是为什么它“闪烁”灰色一秒钟然后变回原来的原因。这意味着页面已完成重新加载。假设您使用的是网络表单，或者按钮在form内部。

<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("div").css("background", "grey");
            return false;
        });
    });
</script>

Answer 2

要执行此操作的原始js版本是：

<div id="div1" style="width: 200px; height:200px; "></div>
<button onclick="changeTheme()">Grey</button>
<script>
    function changeTheme() {
        document.getElementById('div1').style.background = "grey";
    }
</script>

Answer 3

$(document).ready(function(){
  $("button").click(function(){
    $("div").addClass("bgchange");
  });
});

也添加此CSS

.bgchange{background-color:grey}

JavaScript换色器无法正常工作

3 个答案: