在测试文件中编写的代码运行得非常好，我必须将其合并到主代码中，但进展不太顺利。
基本代码由一个简单的 html 文件和一个名为“记住这一点”的按钮组成。
它有一个名为 showRememberMenu() 的函数的 onclick。该函数创建了一个显示在按钮下方的菜单。
下拉菜单有几个标签可以添加到数据中，以提醒用户为什么要尝试记住它。 （我老了，我需要所有我能得到的帮助来记住东西。）
单击按钮，查看下拉菜单，单击您想要的标签，您正在查看的数据将保存在带有该标签的数组中。单击菜单后它就会消失。
然后我的任务是将其放入一个更大的脚本中并查看它是否同样工作......哦，也许不是。单击菜单，使用标签存储数据，然后......什么？为什么菜单还在那里？原版一点击就被删除了。为什么它不消失？
如果我点击“退出不保存”标签，它仍然显示菜单。
作为用户，我正在查看一张包含数据库数据的卡片。单击此按钮是保存该数据以供以后使用的一种方法。在这里您可以看到带有新按钮的卡片。
单击该按钮查看下拉列表并选择与记住此数据相关的标签...
现在对其他卡片执行相同的操作，您就拥有了完成某些任务所需的所有数据，但为什么“&%!!! 该菜单永远不会消失？
在我没有想法后，我联系了我的同事人工智能双子座。它给了我第一个解决方案，这正是我已经拥有的代码。它建议了很多事情，但没有一个起作用。
人们相信检查节点和元素是否存在会让一切都好起来，但事实并非如此。
我们花了大约一个小时的时间才被告知不起作用的事情，并被告知时间问题，可能需要延迟，这确实不相关，但作为一个团队，我们慢慢地解决了这个问题。
如果你想尝试解决这个问题，我敢打赌你可以在更短的时间内完成。
这是有效的原始草案代码...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Some Javascript</title>
<link rel="stylesheet" href="./someJavascript.css">
<link rel="icon" href="favicons/favicon.ico" type="image/icon type">
</head>
<body>
<div>
<p>and the javascript<br>
</p>
<pre class="brush:php;toolbar:false">let logToConsole=true;
var rowData={THId:'2', TaskName:'To climb a tree', TaskDesc:'Try using hands & feet'};
var remember=[];
function rememberProcess(remember){
if(logToConsole) console.log('RememberProcess()');
for(i=0;i<remember.length;i+=2){
console.log('Item ',i/2+1,' of ', remember.length/2,' items', 'Remember as ',remember[i], remember[i+1]);}
}
function putDataIntoRemember(menuHeader,rowData){
if(logToConsole) console.log('putDataIntoRemember()');
remember.push(menuHeader);
remember.push(rowData);
}
function deleteMenu(menuLu){
if(logToConsole) console.log('deleteMenu()');
menuLu.parentNode.removeChild(menuLu);
}
function showRememberMenu(){
if(logToConsole) console.log('showRememberMenu()');
if(document.querySelector('#rememberMenu') ) return; //menu already exists
const remember_button = document.querySelector('#remember');
const menuHeaders=['EXIT no save', 'as Student', 'as Manager', 'as Author', 'as Task' , 'as Note'];
menuLu=document.createElement('lu');
menuLu.id='rememberMenu';
for(let i=0;i<menuHeaders.length;i++){
li=document.createElement('li');
li.innerText=menuHeaders[i];
li.id=menuHeaders[i];
li.classList.add('rememberLi');
li.addEventListener('click', () => { //console.log('li button clicked', menuHeaders[i], rowData)
if(menuHeaders[i]=='EXIT no save') {deleteMenu(menuLu);return};
putDataIntoRemember(menuHeaders[i], rowData);//[header][rowData]
rememberProcess(remember);//do something with the stored data structure
deleteMenu(menuLu);
})
menuLu.appendChild(li);
}
remember_button.appendChild(menuLu);
}
有一些CSS，但与问题无关
.remember_button {
background-color: #5A5050;
border: 0;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 12px;
padding: 3px 4px;
position: relative;
letter-spacing: 1px;
width: 100px;
}
/*Button goes white on hover*/
.remember_button:hover {
background-color: #ffffff;
color: #001F61;
cursor:pointer;
}
.rememberLi{
background-color: #aa9595;
border: 0;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 12px;
padding: 3px 4px;
position: relative;
letter-spacing: 1px;
width: 100px;
}
.rememberLi:hover {
background-color: #ffffff;
color: #001F61;
cursor:pointer;
}
以上的作品，或多或少符合我的要求。
这是一个更大系统中的版本，我不会全部发布。
卡片是动态生成的，并添加了以下代码以生成与原始按钮相同类型的按钮
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Some Javascript</title>
<link rel="stylesheet" href="./someJavascript.css">
<link rel="icon" href="favicons/favicon.ico" type="image/icon type">
</head>
<body>
<div>
<p>and the javascript<br>
</p>
<pre class="brush:php;toolbar:false">let logToConsole=true;
var rowData={THId:'2', TaskName:'To climb a tree', TaskDesc:'Try using hands & feet'};
var remember=[];
function rememberProcess(remember){
if(logToConsole) console.log('RememberProcess()');
for(i=0;i<remember.length;i+=2){
console.log('Item ',i/2+1,' of ', remember.length/2,' items', 'Remember as ',remember[i], remember[i+1]);}
}
function putDataIntoRemember(menuHeader,rowData){
if(logToConsole) console.log('putDataIntoRemember()');
remember.push(menuHeader);
remember.push(rowData);
}
function deleteMenu(menuLu){
if(logToConsole) console.log('deleteMenu()');
menuLu.parentNode.removeChild(menuLu);
}
function showRememberMenu(){
if(logToConsole) console.log('showRememberMenu()');
if(document.querySelector('#rememberMenu') ) return; //menu already exists
const remember_button = document.querySelector('#remember');
const menuHeaders=['EXIT no save', 'as Student', 'as Manager', 'as Author', 'as Task' , 'as Note'];
menuLu=document.createElement('lu');
menuLu.id='rememberMenu';
for(let i=0;i<menuHeaders.length;i++){
li=document.createElement('li');
li.innerText=menuHeaders[i];
li.id=menuHeaders[i];
li.classList.add('rememberLi');
li.addEventListener('click', () => { //console.log('li button clicked', menuHeaders[i], rowData)
if(menuHeaders[i]=='EXIT no save') {deleteMenu(menuLu);return};
putDataIntoRemember(menuHeaders[i], rowData);//[header][rowData]
rememberProcess(remember);//do something with the stored data structure
deleteMenu(menuLu);
})
menuLu.appendChild(li);
}
remember_button.appendChild(menuLu);
}
其余的 javascript 与原始代码几乎相同
.remember_button {
background-color: #5A5050;
border: 0;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 12px;
padding: 3px 4px;
position: relative;
letter-spacing: 1px;
width: 100px;
}
/*Button goes white on hover*/
.remember_button:hover {
background-color: #ffffff;
color: #001F61;
cursor:pointer;
}
.rememberLi{
background-color: #aa9595;
border: 0;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 12px;
padding: 3px 4px;
position: relative;
letter-spacing: 1px;
width: 100px;
}
.rememberLi:hover {
background-color: #ffffff;
color: #001F61;
cursor:pointer;
}
点击之前的提醒
以及点击后如何卡住
我不知道问题是什么，Gemini 正在听一场完全不相关的内容的讲座，但艾和我终于缩小了范围，现在看起来太简单了。
那么为什么菜单会保留下来？
以上是Javascript 监听器点击诱饵的详细内容。更多信息请关注PHP中文网其他相关文章！
