Javascript リスナーのクリック餌
テスト ファイルにコードを書いて非常にうまく動作したので、それをメイン コードに組み込む必要がありましたが、あまりうまくいきませんでした。
基本的なコードは、「これを覚えておいてください」という 1 つのボタンを備えた単純な HTML ファイルで構成されています。
これには、showRememberMenu() という関数への onclick がありました。この関数は、ボタンの下に表示されるメニューを作成しました。
ドロップダウン メニューには、ユーザーがデータを思い出そうとした理由を思い出させるためにデータに追加するタグがいくつかありました。 (私は年をとったので、物事を思い出すにはあらゆる助けが必要です。)
ボタンをクリックしてドロップダウン メニューを表示し、必要なタグをクリックすると、表示しているデータがそのタグを持つ配列に保存されます。メニューをクリックするとメニューが消えます。
私の仕事は、それをより大きなスクリプトに落とし込んで、同じように動作するかどうかを確認することでした...ああ、違うかもしれません。メニューをクリックし、データをタグ付きで保存すると…え?なぜメニューがまだ残っているのですか?オリジナルではクリックするとすぐに削除されてしまいました。なぜ消えないのでしょうか?
「保存せずに終了」というタグをクリックすると、メニューが表示されたままになります。
ユーザーとして、私はデータベースのデータが含まれるカードを見ていました。このボタンをクリックすると、後で使用できるようにデータが保存されます。ここでは、新しいボタンを備えたカードが表示されます。
そのボタンをクリックしてドロップダウンを表示し、このデータの記憶に関連するタグを選択します...
次に、他のカードでも同じことを行うと、タスクを完了するために必要なデータがすべて揃っています。しかし、なぜ「&%!!! そのメニューは消えないのですか?
アイデアが尽きた後、私は同僚の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; }
クリックされる前の外観のリマインダー
クリック後にどのようにスタックするのか
私には問題が何なのか全く分かりませんでした。ジェミニはまったく関係のない内容で授業を始めましたが、Ai と私は最終的に問題を絞り込み、今ではとても簡単に思えました。
では、なぜメニューが存続するのでしょうか?
以上がJavascript リスナーのクリック餌の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...
