javascript - que - onclick

¿Cambia el color del botón al hacer clic y permanece igual durante el resto del tiempo?

Question

aquí está lo que intento que mi botón cambie de color para que el usuario pueda ver que ya hizo clic en el botón. e incluso si actualiza la página, el botón permanecerá en el mismo color que estaba después de que haga clic primero. la razón es que estoy mostrando muchos botones en una página. aquí está mi código de botón.

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

Answer 1

Depende totalmente de cuán permanente quiera que sea el color cliqueado. Teniendo en cuenta su caso, podría utilizar cookies , cache o localStorage pero el usuario puede borrar los datos de cualquiera de ellos, o si el usuario usa algún otro sistema para iniciar sesión y hacer clic en el botón, es posible que el color cliqueado no esté disponible, por lo tanto La mejor solución para este problema podría ser almacenarla en la database de database modo que cada vez que el usuario inicie sesión, el color del botón seleccionado se cambie de forma permanente.

Si aún desea hacerlo con localStorage, aquí hay un enlace para ayudarlo: https://developer.mozilla.org/en-US/docs/Web/API/Storage

Answer 2

Esto funciona para cambiar el color y recordarlo, incluso si actualiza con 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>

Si lo desea, puede poner algo de lógica para cambiar con cada clic al siguiente color. Para esto, debe cambiar la línea btnColor = ''green'' con su código de favorit.

Answer 3

Prueba esto:

http://jsfiddle.net/wmy8vucb/

Puede hacer uso de localStorage y jQuery para lograr esto.

código simple:

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

EDITAR:

En función de sus comentarios a continuación, ya tiene un poco de estilo CSS en su botón. para asegurarse de que el nuevo CSS / color se aplica a su botón cuando se hace clic en él, todo lo que tiene que hacer es esto:

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

Tome nota de:

 !important;

Segunda edición:

El código en el último jsfiddle que proporcionó funciona bien si se asegura de cambiar la ID del botón:

Básicamente, el ID de su botón es myBtn pero no está usando ese ID en el código jQuery. así que cambie esa ID a la misma ID que se utiliza en el código jQuery o simplemente cambie la ID que se utiliza en el código jQuery a myBtn .

ejemplo de trabajo:

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

Answer 4

esto funciona para mí 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>