Question

使用php / ejs脚本;我想要一个按钮，一旦点击就保持其悬停颜色。该脚本在Ajax上运行，因此页面无法刷新。

我的色彩保留功能正常，但默认为空白（0）/＆＃39;金额＆＃39;无论我点击哪个按钮，都会上课。

我还尝试对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;
  }

common.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

Answer 2

这就是发生的事情： - 正在刷新元素。 - 我不得不在php中操作会话，以便将'true'变量传递回EJS，以便获得正确的按钮来保留其颜色。

对于那些感兴趣的人，这就是我的所作所为： - 在php中添加了一个会话变量来捕获按钮值：

$this->session->data['selectedamount'] = $this->session->data['amount'];

在EJS中：

<% 
    if(model.successes.selectedamount !== info.amount){ 
        var chosenclass ='amount';
    }else{
        var chosenclass ='chosen';
    } 
%>
<button type="button" name="info" value="<%= info.amount ? info.amount : '' %>" id="info" class="<%= chosenclass %>"></button>

Onclick按钮 - ＆gt;保留颜色 - 使用数组可能吗？

2 个答案: