将上次单击的按钮和访问过的按钮(未访问过的）的颜色分开

Seperate color for last clicked buttons and visited buttons not visited buttons

本文关键字：按钮 访问 颜色 单击      更新时间：2023-09-26

为动态创建的按钮分离颜色

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++;

一个简单的解决方案是拥有两个不同的CSS类，并使用Javascript onClick:进行管理

CSS

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

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中。

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

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
.unvisited-color{
  background-color:#D3D578;
}
.visited-color{
  background-color:#E5E5E5;
}

相关文章：