ホームページ > 記事 > ウェブフロントエンド > Javascript リスナーのクリック餌

Javascript リスナーのクリック餌

Susan Sarandonオリジナル: 2024-11-23 09:16:45518ブラウズ

テストファイルにコードを書いて非常にうまく動作したので、それをメインコードに組み込む必要がありましたが、あまりうまくいきませんでした。

基本的なコードは、「これを覚えておいてください」という 1 つのボタンを備えた単純な HTML ファイルで構成されています。

Javascript listeners click bait

これには、showRememberMenu() という関数への onclick がありました。この関数は、ボタンの下に表示されるメニューを作成しました。

Javascript listeners click bait

ドロップダウンメニューには、ユーザーがデータを思い出そうとした理由を思い出させるためにデータに追加するタグがいくつかありました。 (私は年をとったので、物事を思い出すにはあらゆる助けが必要です。)

ボタンをクリックしてドロップダウンメニューを表示し、必要なタグをクリックすると、表示しているデータがそのタグを持つ配列に保存されます。メニューをクリックするとメニューが消えます。

私の仕事は、それをより大きなスクリプトに落とし込んで、同じように動作するかどうかを確認することでした...ああ、違うかもしれません。メニューをクリックし、データをタグ付きで保存すると…え？なぜメニューがまだ残っているのですか？オリジナルではクリックするとすぐに削除されてしまいました。なぜ消えないのでしょうか?

「保存せずに終了」というタグをクリックすると、メニューが表示されたままになります。

ユーザーとして、私はデータベースのデータが含まれるカードを見ていました。このボタンをクリックすると、後で使用できるようにデータが保存されます。ここでは、新しいボタンを備えたカードが表示されます。

Javascript listeners click bait

そのボタンをクリックしてドロップダウンを表示し、このデータの記憶に関連するタグを選択します...

Javascript listeners click bait

次に、他のカードでも同じことを行うと、タスクを完了するために必要なデータがすべて揃っています。しかし、なぜ「&%!!! そのメニューは消えないのですか?

アイデアが尽きた後、私は同僚のAI ジェミニに連絡しました。最初の解決策は、私がすでに持っていたコードとまったく同じでした。多くのことを提案しましたが、どれもうまくいきませんでした。

ノードと要素の存在をチェックすればすべてがうまくいくと確信していましたが、そうではありませんでした。

うまくいかないことを言われたり、タイミングの問題についてレクチャーされたり、実際には関係のない遅延が必要になったりすることもありましたが、チームとしてゆっくりと問題を解決しました。

これを解決しようと思えば、きっともっと短い時間で解決できると思います。

これが機能する元のドラフトコードです...

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

私には問題が何なのか全く分かりませんでした。ジェミニはまったく関係のない内容で授業を始めましたが、Ai と私は最終的に問題を絞り込み、今ではとても簡単に思えました。

では、なぜメニューが存続するのでしょうか?

以上がJavascript リスナーのクリック餌の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：テストケース: 包括的なガイド次の記事：テストケース: 包括的なガイド

続きを見る