javascript - 单击按钮 -> 保留颜色 - 这可能使用数组吗？

Question

使用 php/ejs 脚本；我想要一个按钮在单击后保留其悬停颜色。该脚本在 Ajax 上运行，因此页面不会刷新。

我的颜色保留功能可以正常工作，但无论我点击哪个按钮，它都默认为空白 (0)/“数量”类。

我还尝试对 ID 进行硬编码以区分类，但没有成功。

来自模板文件/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>
<% }) %>

^^ 这遍历一组数组并显示所有按钮选项。

尝试过:

<% _.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> 
<% }) %>

[ 并为 amount1 等硬编码样式表类。 ]

当前样式表:

 .amount {
     background-color:#c0c0c0;
}
.amount:hover, .amount:focus,.chosen {
     background-color:#000;
}

还在common.js中直接尝试了ajax:

$('#info').on('click',function(){
    $(this).toggleClass('chosen');
});

不确定它是否与问题相关，但这是 js 事件:

    events: {
        'click button#info': 'updateInfo',
},

更新: 试过这个，没有用。因为模板包装在 EJS 中，我是否需要做一些特殊的事情才能让它工作？我的意思是，js 翻转和颜色变化是非常基本的。不确定为什么这不起作用。

样式表:

  .amount1 {
     background-color:#c0c0c0;
  }
  .chosen1, .amount1:hover {
       background-color:#000;
  }

常见的.js 是的，它是从页面调用的。控制台没有错误:

 $('.amount').on('click',function(){
    $(this).toggleClass('.chosen1');
});

来自 EJS 模板的按钮输入:

<button type="button" name="info" value="<%= info.amount ? info.amount : '' %>" id="info" class="amount<%= info.id %>"><%= info.name %></button>

Answer 1

您正在寻找伪类:visited。将其作为选择器放入您的 CSS 中，并复制您在 :hover

中使用的颜色

MDN