Javascript 监听器点击诱饵-js教程-PHP中文网

首页

web前端

js教程

Javascript 监听器点击诱饵

Susan Sarandon

Nov 23, 2024 am 09:16 AM

在测试文件中编写的代码运行得非常好，我必须将其合并到主代码中，但进展不太顺利。

基本代码由一个简单的 html 文件和一个名为“记住这一点”的按钮组成。

Javascript listeners click bait

它有一个名为 showRememberMenu() 的函数的 onclick。该函数创建了一个显示在按钮下方的菜单。

Javascript listeners click bait

下拉菜单有几个标签可以添加到数据中，以提醒用户为什么要尝试记住它。（我老了，我需要所有我能得到的帮助来记住东西。）

单击按钮，查看下拉菜单，单击您想要的标签，您正在查看的数据将保存在带有该标签的数组中。单击菜单后它就会消失。

然后我的任务是将其放入一个更大的脚本中并查看它是否同样工作......哦，也许不是。单击菜单，使用标签存储数据，然后......什么？为什么菜单还在那里？原版一点击就被删除了。为什么它不消失？

如果我点击“退出不保存”标签，它仍然显示菜单。

作为用户，我正在查看一张包含数据库数据的卡片。单击此按钮是保存该数据以供以后使用的一种方法。在这里您可以看到带有新按钮的卡片。

Javascript listeners click bait

单击该按钮查看下拉列表并选择与记住此数据相关的标签...

Javascript listeners click bait

现在对其他卡片执行相同的操作，您就拥有了完成某些任务所需的所有数据，但为什么“&%!!! 该菜单永远不会消失？

在我没有想法后，我联系了我的同事人工智能双子座。它给了我第一个解决方案，这正是我已经拥有的代码。它建议了很多事情，但没有一个起作用。

人们相信检查节点和元素是否存在会让一切都好起来，但事实并非如此。

我们花了大约一个小时的时间才被告知不起作用的事情，并被告知时间问题，可能需要延迟，这确实不相关，但作为一个团队，我们慢慢地解决了这个问题。

如果你想尝试解决这个问题，我敢打赌你可以在更短的时间内完成。

这是有效的原始草案代码...

<!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;
}

登录后复制

点击之前的提醒
Javascript listeners click bait