Is it possible to make a button retain its hover color even after it has been clicked using a php/ejs script? The script is running on Ajax, so the page does not refresh.
I have managed to get the color retention feature to work, but it always defaults to the blank (0) / 'amount' class regardless of which button I click on.
I also attempted to hardcode IDs to differentiate the classes, but unfortunately, that did not yield any success.
Here is the current code snippet from the template file/ejs:
<% _.each(model.information_amounts, function(info) { %>
<div class="classBlock">
<button type="button" name="info" value="<%= info.amount ? info.amount : '' %>" id="info" class="amount"><%= info.name %></button>
</div>
<% }) %>
This code snippet loops through an array and displays all the button options available.
Attempts made:
<% _.each(model.information_amounts, function(info) { %>
<div class="classBlock">
<button type="button" name="info" value="<%= info.amount ? info.amount : '' %>" id="info" class="amount<%= info.id %>"><%= info.name %></button>
</div>
<% }) %>
[I also hardcoded the stylesheet class for amount1 and similar ones.]
Current Stylesheet:
.amount {
background-color:#c0c0c0;
}
.amount:hover, .amount:focus,.chosen {
background-color:#000;
}
Another approach tried with Ajax in common.js:
$('#info').on('click',function(){
$(this).toggleClass('chosen');
});
It is uncertain if this is relevant to the question, but here's the js event:
events: {
'click button#info': 'updateInfo',
},
Update: Experimented with the solution provided above, however, it did not produce the desired outcome. Considering that the template is enclosed within EJS, is there anything specific that needs to be done to ensure this functionality works as intended? It seems rather perplexing why simple js rollovers and color changes are not working in this scenario.
Stylesheet:
.amount1 {
background-color:#c0c0c0;
}
.chosen1, .amount1:hover {
background-color:#000;
}
common.js Yes, this file is indeed being called from the page. There are no errors reported in the console:
$('.amount').on('click',function(){
$(this).toggleClass('.chosen1');
});
Button input from the EJS template:
<button type="button" name="info" value="<%= info.amount ? info.amount : '' %>" id="info" class="amount<%= info.id %>"><%= info.name %></button>