参考までに、Javascriptを使用してメッセージボードの例(メッセージ削除あり)を実装します。具体的な内容は次のとおりです。 まだフロントエンドの勉強中です。コードに不備や間違った考えがあったらご容赦ください。アドバイスをよろしくお願いします。 一部のウェブサイトのディスカッションエリアでは、通常、メッセージボード機能を見ることができます。ユーザーがコメントすると、空のコメントは投稿できません。最新のコメントが表示され、古いコメントは押し下げられます。その後、ブロガーはコメントを削除できます。 コードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> * { マージン: 0; パディング: 0; } 体 { パディング: 100px; } テキストエリア { 幅: 200ピクセル; 高さ: 100px; 境界線: 1px ピンク アウトライン: なし; サイズ変更: なし; } ul { 上マージン: 50px; } li { リストスタイル: なし; 幅: 300ピクセル; パディング: 5px; 背景色: rgb(245, 209, 243); 色: 赤; フォントサイズ: 14px; マージン: 15px 0; } li a { フロート: 右; テキスト装飾: なし; } </スタイル> </head> <本文> <テキストエリア名="" id=""></テキストエリア> <button>公開</button> <ul> </ul> <スクリプト> var btn = document.querySelector('ボタン') var テキストエリア = document.querySelector('テキストエリア') var ul = document.querySelector('ul') btn.onclick = 関数(){ テキストエリアの値 == '' の場合 { アラート('Ning には入力がありません') 偽を返す }それ以外{ var li = document.createElement('li') li.innerHTML=textarea.value+"<a href='javascript:;'>削除</a>" ul.insertBefore(li,ul.children[0]) var as=document.querySelectorAll('a') (var i=0;i<as.length;i++){ as[i].onclick=関数() { ul.removeChild(この親ノード) } } } } </スクリプト> </本文> </html> エフェクト表示 コメントが空の場合: 新しいコメントは古いコメントを押し下げます: 削除する場合: コードの説明 ここでは、ボタンクリックイベントがトリガーされると、テキストフィールドの内容が取得され、関数がトリガーされ、最初にテキストフィールドの値が空であるかどうかの判断が行われます。そうである場合、警告ボックスがポップアップし、テキストの内容は下に表示されません。 テキストボックスにコンテンツがある場合は、要素 li を作成し、li を使用して ' を受け取ります。次に、li のテキストコンテンツを、テキスト領域の 1 の内容 + a タグ (削除機能) に設定します。 次に、新しく追加した li を前面に表示するように設定します (insertbefore)。次に、a タグがクリックされたときに行が削除されるように、ループ内で a タグをバインドする必要があります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Jenkins の紹介と Docker で Jenkins をデプロイする方法
方法 1: <input id= "File1" type= "...
1. 関連ツールと画像をダウンロードするダウンロードリンクバーチャルボックス: https://do...
ユーザー テーブルを設計するときに、各人の ID 番号が一意であり、検索する必要があるシナリオを想像...
1. cuda10.1をダウンロードします。 NVIDIA 公式ウェブサイト リンク: https:...
はじめに: プロジェクトを開発するために、サーバーに MySql データベース サーバーを展開し、ロ...
序文先ほどのプロジェクトを参考にすると、環境は整いました。プロジェクトの準備と検証の段階で、問題が発...
よくある質問easyswoole を初めて使用する場合は、次のような問題に遭遇することがよくあります...
viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...
MySQLはユーザーを作成し、ユーザーの権限を承認および取り消します動作環境: MySQL 5.0...
ネイティブjsカプセル化シームレスカルーセルプラグイン、参考までに、具体的な内容は次のとおりです。例...
Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...
目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...
今回は、 RNの起動処理を整理しました。最後のstartReactApplication比較的複雑で...
この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...
必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末...