今日、私は非常に奇妙な要求に遭遇しました。これは次のとおりです。テキストをクリックすると、削除ボタンがポップアップして、クリックしたテキストを削除します。
おい?当時私はそれについて考えました、それは難しくありませんでした。しかし、それは奇妙な要求だったので、どうしてそんなに単純なのでしょうか?
はい、別の機能があります。どのタグをクリックしたかわかりません。英語でテキストを運ぶことができるタグが多すぎます...
当時、私は混乱していました。どのタグをクリックするかわからなかったのですが、イベントにバインドするにはどうすればよいですか?誰のためにイベントを結びましたか?私はまだ長い間話し合ってからそれを書かなければなりませんでした。それで私は働き始めました。
私の考えはこんな感じです:
始める
1.最初に、マウスでオブジェクトをクリックしてもらう必要があります。 (質問は...どのようにクリックしたかを知るにはどうすればよいですか)
次に、関数を書き込み、マウスでオブジェクトをクリックします
get_tag関数はボディのonclickイベントにバインドされ、イベントパラメーターが受け入れられます。
次に、イベントオブジェクトにはターゲット属性があります。これは、マウスクリックを直接取得できるオブジェクトです。
ログインして見てみましょう
まあ、それは大丈夫です。それは以前のアイデアと一致しており、望ましい結果を得ます。
2。オブジェクトを取得します。しかし、それを削除する方法は?
var del_tag = function(){var tag = null; return {get:function(e){tag = e; }、del:function(){$(tag).remove(); }}}[削除]ボタンは、クリックするオブジェクトとは何の関係もないため、クリックしたオブジェクトを保存するために閉鎖を書き込み、タグを宣言する必要があります。
次に、2つの関数を返します。1つは取得します。マウスが前回クリックしたオブジェクトを取得するために使用されます。 1つはdelです。名前が示すように、クリックされたオブジェクトを削除します。
閉鎖であるため、目的の関数を実現するために、タグはメモリに保存されます。
3。2つの組み合わせ
var del_tag = function(){var tag = null; return {get:function(e){tag = e; }、del:function(){$(tag).remove(); }}} var dt = del_tag(); // del_tagをdt function get_tag(e){var ele = e.target; // dt.get()を呼び出すパラメーターはget_tag関数イベントパラメーターdt.get($(ele))の値です。 } $( '#del')。click(function(){//ここでは、クロージャーが作成されたため、クリックしたオブジェクトは保存されました。4。効果をチェックしてください
5.効果はかなり良いです。ただし...特定のオブジェクトをクリックして削除できます。これは混乱ですか?その後、変更します
var del_tag = function(){var tag = null; return {get:function(e){tag = e; }、del:function(){$(tag).remove(); }}} var dt = del_tag(); // del_tagをdt function get_tag(e){var ele = e.target; $(ele).css( 'border'、 '1px solid red')var tagname = ele.tagname; //タグ配列を定義します。オブジェクトを保存するために使用するvar tagarr = ['span'、 'h1'、 'h2'、 'h3'、 'h4'、 'h5'、 'h6'、 'p']を削除する必要があります。 //クリックしたオブジェクトが配列で宣言されているかどうかを判断すると、削除できます。 if(tagarr.indexof(tagname)> -1){// dt.get()パラメーターを呼び出すことは、get_tag関数イベントパラメーターターゲットdt.get($(ele))の値です。 }} $( '#del')。click(function(){//ここでは、閉鎖が作成されたため、クリックしたオブジェクトは保存されました。効果をチェックしてください:
はい。それは正しいようです。定義するオブジェクトではない場合、削除することはできません。
要件に記載されている削除されたテキストとは少し異なりますが。しかし、あなたが私にあなたがそれらのラベルを使用してテキストをホストすると言う限り、私はそれを削除することができます...
get_tag()関数をボディまたはhtml onclickイベントに配置できないことを強調しましょう。それ以外の場合、ページ全体のテキストは削除されます...
get_tag()関数は、テキストを削除するdivにバインドされています。
上記の記事JSは、マウスでオブジェクトをクリックし、別のボタンをクリックして、オブジェクトの実装コードを削除して、私が共有したすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。