首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为上次单击的按钮和访问过的按钮未访问的按钮分开颜色

为上次单击的按钮和访问过的按钮未访问的按钮分开颜色
EN

Stack Overflow用户
提问于 2016-05-02 20:06:29
回答 2查看 93关注 0票数 2

为动态创建的按钮分色

代码语言:javascript
运行
复制
var btn = document.createElement("BUTTON");
btn.style.backgroundColor = "D3D578";
        btn.setAttribute("id", "btn" + buttonId);
        btn.setAttribute("class", "class" + classId);
        btn.innerText = "click" + buttonId;
        btn.innerText = "click" + classId;
        console.log(btn);
        document.body.appendChild(btn);buttonId++;classId++;
EN

回答 2

Stack Overflow用户

发布于 2016-05-02 20:21:33

一个简单的解决方案是有两个不同的CSS类,并使用Javascript onClick来管理它:

CSS

代码语言:javascript
运行
复制
.visited-button{
   background-color: #342762; /*visited color*/
}

.normal-button{
   background-color: #ff76aa; /*non-visited color*/
}

Javascript

代码语言:javascript
运行
复制
// your function
    var btn = document.createElement("BUTTON");
    btn.style.backgroundColor = "D3D578";
    btn.setAttribute("id", "btn" + buttonId);
    btn.setAttribute("class", "class" + classId);

 // Add this here
    btn.onclick=changeButtonColor(btn);

    btn.innerText = "click" + buttonId;
    btn.innerText = "click" + classId;
    console.log(btn);
    document.body.appendChild(btn);buttonId++;classId++;
// end of your function


function changeButtonColor(button){
   button.class = "visited-button";
}

请注意,此解决方案是视图范围的。这意味着一旦用户离开页面并再次进入,每个按钮都将被取消访问。如果你想做会话作用域(即刷新页面后按钮仍然会被访问),那么你将不得不在服务器端处理它,将此信息存储在会话本身或cookie中。

票数 0
EN

Stack Overflow用户

发布于 2016-05-02 20:34:00

您可以尝试下面的选项,通过颜色来区分已访问和未访问的按钮。

JavaScript

代码语言:javascript
运行
复制
function generateButtons(totalBtns){
	for(var i=0; i<totalBtns; i++){
  	var btn = document.createElement("button");
    btn.setAttribute("class", "unvisited-color");
    btn.innerText = "clickbtn" + i;
    btn.addEventListener('click', onBtnClick);
    document.body.appendChild(btn);
  } 
}
function onBtnClick(event){
	event.target.setAttribute("class", "visited-color");
}
generateButtons(3); //generate buttons dynamically
代码语言:javascript
运行
复制
.unvisited-color{
  background-color:#D3D578;
}

.visited-color{
  background-color:#E5E5E5;
}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36982045

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档