单击更改按钮颜色并在其余时间保持不变？答案

【问题标题】：change button color on-click and remains same for rest of the time?单击更改按钮颜色并在其余时间保持不变？
【发布时间】：2018-04-07 11:04:56
【问题描述】：

这是我试图让我的按钮改变颜色的东西，以便用户可以看到他已经点击了按钮。即使他刷新页面，按钮的颜色也会与他第一次单击后的颜色相同。原因是我在一页上显示了很多按钮。这是我的按钮代码。

&lt;button id="ikk" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="UZqTjJnRVdGQjQ"&gt;Procced &lt;/button&gt;

【问题讨论】：

你能展示你尝试过的东西吗？帮助会更容易
请添加您的代码（使用您的 js 和 html 或 php）来描述您现在得到的输出问题
抱歉，我是新添加的代码，感谢您的快速帮助。
@Oceanofffiles.com 查看我的答案。
@Oceanofffiles.com 查看我的（编辑的）答案，它可以满足您的需求。

标签： javascript php html button onclick

【解决方案1】：

试试这个：

http://jsfiddle.net/wmy8vucb/

您可以使用localStorage 和jQuery 来实现此目的。

简单代码：

///APPLY A CSS TO THE BUTTON WHEN ITS CLICKED//////

    $( "#someid" ).click(function() {

    $(this).addClass('myclass');

    localStorage.setItem('clicked', '1');

    });



    ////YOU MIGHT WANT TO PUT THIS IN A DOCUMENT READY FUNCTION////

    if(localStorage.getItem("clicked") != null){

    $("#someid").addClass('myclass');


    }

编辑：

根据下面的 cmets，您的按钮上已经有了一些 CSS 样式。因此，要确保在单击按钮时将新的 CSS/颜色应用于您的按钮，您所要做的就是：

.myclass{
  background-color:green !important;
}

记下：

 !important;

第二次编辑：

如果您确保更改按钮的 ID，您提供的最后一个 jsfiddle 中的代码可以正常工作：

基本上，您的按钮 ID 是 myBtn，但您没有在 jQuery 代码中使用该 ID。所以要么将该 ID 更改为 jQuery 代码中使用的相同 ID，或者简单地将 jQuery 代码中使用的 ID 更改为 myBtn。

工作示例：

http://jsfiddle.net/wmy8vucb/6/

【讨论】：

我更喜欢 sessionStorage 而不是 localStorage
它在 jsfiddle.net 上完美运行，但在网站上却不行。你能详细解释一下我应该把哪些代码放在哪里。谢谢
嗯，它可以在网站上使用，但不适用于我现有的按钮，我创建了新按钮，它按预期工作得很好。这可能是按钮中已经有“样式”的原因吗
jsfiddle.net/wmy8vucb/2 ，是的，这里就是这种情况。请给我一些建议
@Oceanoffiles.com 只需在 CSS 样式中添加一个 !important，如下所示：jsfiddle.net/wmy8vucb/3

【解决方案2】：

这可以改变颜色并记住它，即使你用 F5 刷新。

<button id="ikk" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" onclick="btnColorChange(0);" data-uid="UZqTjJnRVdGQjQ">Procced </button>

<script>
    btnColorChange(1);

    function btnColorChange(start)
    {
        if (start)
        {   
            index=document.cookie.search("btnColor");

            if (index != -1)
                btnColor=document.cookie.substr(index+9);
            else
                btnColor="#ef332d";
        }
        else
            btnColor='green';

        btnId = document.getElementById("ikk");
        btnId.style["background"] = btnColor;

        document.cookie = "btnColor="+btnColor;
    }
</script>

如果你愿意，你可以加入一些逻辑，每次点击都会改变下一种颜色。为此，您必须使用您喜欢的代码更改 btnColor='green' 行。

【讨论】：

【解决方案3】：

这完全取决于您希望点击颜色的持久性。考虑到您的情况，您可以使用cookies、cache 或localStorage，但其中任何一个中的数据都可以由用户删除，或者如果用户使用其他系统登录并单击按钮，单击的颜色可能不可用，因此该问题的最佳解决方案可能是将其存储在 database 中，这样每次用户登录时，单击按钮的颜色都会永久更改。

如果您仍想使用 localStorage，这里有一个链接可以帮助您： https://developer.mozilla.org/en-US/docs/Web/API/Storage

【讨论】：

【解决方案4】：

这对我有用http://jsfiddle.net/wmy8vucb/6/

$( "#myBtn" ).click(function() {

$(this).addClass('myclass');

localStorage.setItem('clicked', '1');

});



if(localStorage.getItem("clicked") != null){

$("#myBtn").addClass('myclass');


}

.myclass{
  background-color:green !important;
}

&lt;button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="IeUtIMnV0V1JpQlU"&gt;Procced&lt;/button&gt;

【讨论】：