首頁 > 文章 > web前端 > Javascript 監聽器點擊誘餌

Javascript 監聽器點擊誘餌

Susan Sarandon原創: 2024-11-23 09:16:45520瀏覽

在測試檔案中編寫的程式碼運行得非常好，我必須將其合併到主程式碼中，但進展不太順利。

基本程式碼由一個簡單的 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

以及點擊後如何卡住

Javascript listeners click bait

我不知道問題是什麼，Gemini 正在聽一場完全不相關的內容的講座，但艾和我終於縮小了範圍，現在看起來太簡單了。

那為什麼菜單會保留下來？

以上是Javascript 監聽器點擊誘餌的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css less html Array if for select try finally function this idea database kind everything

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：測試用例：綜合指南下一篇：測試用例：綜合指南

看更多