jQueryはシンプルなコメントエリアを実装します

この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介します。具体的な内容は次のとおりです。

1. まずは効果を見てみましょう

①「公開」をクリック

②「コメントを削除」をクリック

2. 実装方法

まず、HTML と CSS を使用してこのような領域を記述します。

HTML コンテンツ:

<div id="ボックス">
 <div id="fabu">
 <textarea placeholder="内容を入力してください!!!" id="text"></textarea>
 </div>
 
 <button onclick="fun1()" id="btn_1">公開</button>
 
 <div id="pinlun"> </div>
</div>

①まずは中身を包む大きな箱を書いてみましょう

②本文、公開ボタン、コメント欄を書く

③ボタンをクリックするとonclickイベントが関数fun1()を実行します。

CSS コンテンツ:

*{ 
 パディング: 0;
 マージン: 0;
 }
 ＃箱{
 幅: 600ピクセル;
 背景色: 水色;
 マージン: 0 自動;
 }
 #ファブ{
 幅: 600ピクセル;
 高さ: 300px;
 背景色: バーリーウッド;
 }
 #ピンル{
 幅: 600ピクセル;
 背景色: 水色;
 }
 テキストエリア{
 幅: 600ピクセル;
 高さ:300px;
 境界線: なし;
 背景色: バーリーウッド;
 フォントサイズ: 24px;
 }
 #btn_1{
 幅: 600ピクセル;
 高さ: 30px;
 背景色: コーンフラワーブルー;
 アウトライン: なし;
 }
 ::プレースホルダー{
 フォントサイズ: 24px;
 }
 #btn_2{
 幅: 80ピクセル;
 高さ: 30px;
 背景色: 茶色;
 境界線の半径: 4px;
 
 }
 
 p{テキスト配置: 右;}
 #neirong{
 背景色: コーラル;
 境界線: 1px ソリッド バーリーウッド;
 
}

① *{} まず、すべての要素のデフォルトの内側と外側の余白を0に設定しましょう。

②各要素に適切なスタイルを設定します

③::placeholder疑似要素タグを使用してプロンプトテキストのサイズを設定します

④ 親ボックスとコメントエリアのdivの高さは設定せず、コメント内容の量に応じて拡張させます。

関数fun1(){
 $('#pinlun').append(
  "<div id='neirong'>" + text.value+"<br><p><button id='btn_2'>コメントを削除</button></p></div>");
  テキスト値="";}

 （関数fun2() {
  $("#pinlun").on("クリック", "ボタン", 関数() {
  $(this).parent().parent().remove();
 })})()

①jQueryは要素を取得するために$("selector")を使用する

②append()メソッドは指定された要素にコンテンツ（タグを含む）を追加します

③fun1()を実行するためにクリックすると、コンテンツを空に設定する必要があります（text.value=""）。

④クリックした時に表示されるピクセルはブラウザによって後から追加されるため

1. リスナーイベントを直接バインドすると要素を見つけることができません（要素が未定義であると報告されます）
2. jQueryを使用して即時実行関数fun2()を設定します。
3. fun2() の on メソッド: element a.on("listen event", "element in element a", try function) なので、要素が未定義かどうかを心配する必要はありません。

⑤関数はボタンにバインドされているので、これがボタンです。削除するには、divのコンテンツを削除する必要があり、parent()は親要素を見つけるためのものです。

⑥ボタンの親の親は追加されたdivで、remove()メソッドで要素を削除します

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。