Question

这就是我试图让我的按钮改变颜色以便用户可以看到他已经点击按钮的事情。即使他刷新页面，该按钮仍将保持与他第一次点击后相同的颜色。原因是我在一个页面上显示了很多按钮。这是我的按钮代码。

＆＃13;

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

＆＃13;

Answer 1

试试这个：

http://jsfiddle.net/wmy8vucb/

您可以使用git clone -v --branch test --single-branch file:///git/abcef/ /tmp/sonar-scanner-20221/abcef/test/和localStorage来实现此目标。

简单代码：

jQuery

修改

根据您的评论，您的按钮上已经有了一些CSS样式。所以为了确保点击时新的CSS /颜色应用于你的按钮，你所要做的就是：

///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'); }

记下：

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

第二次修改：

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

基本上，您的按钮的ID是!important;，但您没有在jQuery代码中使用该ID。所以要么将该ID更改为jQuery代码中使用的相同ID，要么只是将jQuery代码中使用的ID更改为myBtn。

工作示例：

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

Answer 2

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

O(2^(m+n))

如果你愿意，你可以输入一些逻辑来改变每次点击到下一个颜色。为此，您必须使用您的优惠代码更改 btnColor ='green'行。

Answer 3

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

如果您仍想使用localStorage，请点击此处链接以帮助您： https://developer.mozilla.org/en-US/docs/Web/API/Storage

Answer 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;
}

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

更改按钮颜色点击并在其余时间保持相同？

4 个答案: