오늘 나는 매우 이상한 요구를 발견했습니다. 텍스트를 클릭하면 방금 클릭 한 텍스트를 삭제하기 위해 삭제 버튼이 나타납니다.
여기요? 나는 그 당시 그것에 대해 생각했지만 어렵지 않았습니다. 그러나 이상한 수요 였기 때문에 어떻게 그렇게 간단 할 수 있습니까?
예, 다른 기능이 있습니다. 클릭 한 태그를 모르겠습니다. 영어로 텍스트를 전달할 수있는 태그가 너무 많습니다 ...
그 당시 나는 혼란 스러웠다. 클릭 할 태그를 알지 못했습니다. 이벤트를 어떻게 바인딩합니까? 내가 누구를 위해 이벤트를 묶었습니까? 나는 오랫동안 이야기 한 후에도 그것을 써야했다. 그래서 나는 일을 시작했다.
내 생각은 다음과 같습니다.
시작
1. 첫째, 마우스로 물체를 클릭해야합니다. (질문은 ... 내가 클릭 한 것을 어떻게 알 수 있습니까?)
그런 다음 함수를 작성하여 마우스에서 객체를 클릭하십시오.
get_tag 함수는 본문의 Onclick 이벤트에 바인딩 된 다음 이벤트 매개 변수가 허용됩니다.
그런 다음 이벤트 객체에는 대상 속성이 있으며 마우스 클릭을 직접 얻을 수있는 객체입니다.
보자 로그인합시다
글쎄, 괜찮아. 이전 아이디어와 일치하며 원하는 결과를 얻습니다.
2. 개체를 얻으십시오. 하지만 삭제하는 방법?
var del_tag = function () {var tag = null; return {get : function (e) {tag = e; }, del : function () {$ (tag) .remove (); }}}삭제 버튼은 우리가 클릭하는 객체와 관련이 없으므로 클릭 한 객체를 저장하기 위해 클로저를 작성하고 태그를 선언해야합니다.
그런 다음 두 기능을 반환하십시오. 마우스가 지난번에 클릭 한 객체를 얻는 데 사용되었습니다. 하나는 델입니다. 이름에서 알 수 있듯이 클릭 한 객체를 삭제하십시오.
폐쇄이므로 원하는 기능을 실현하기 위해 태그가 메모리에 저장됩니다.
3. 둘의 조합
var del_tag = function () {var tag = null; return {get : function (e) {tag = e; }, del : function () {$ (tag) .remove (); }}} var dt = del_tag (); // dt get_tag (e) {var ele = e.target; // 호출 dt.get () 매개 변수는 get_tag 함수 이벤트 매개 변수 dt.get ($ (ele))의 값입니다. } $ ( '#del'). 클릭 (function () {// 여기, 여기, 폐쇄가 생성되었으므로 마지막으로 클릭 한 객체가 저장되었습니다. // 여기에서 직접 dt.del ()을 호출 할 수 있습니다.4. 효과를 확인하십시오
5. 효과는 꽤 좋습니다. 그러나 ... 특정 객체를 클릭하여 삭제할 수 있습니다. 이게 엉망이야? 그런 다음 변경하십시오
var del_tag = function () {var tag = null; return {get : function (e) {tag = e; }, del : function () {$ (tag) .remove (); }}} var dt = del_tag (); // dt 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 함수 이벤트 매개 변수 target dt.get ($ (ele))의 값입니다. }} $ ( '#del'). 클릭 (function () {// 여기, 여기, 폐쇄가 생성되었으므로 마지막으로 클릭 한 객체가 저장되었습니다. // 객체 dt.del ()를 삭제하려면 dt.del ()에게 호출 할 수 있습니다.효과를 확인하십시오.
예. 옳은 것 같습니다. 우리가 정의하는 객체가 아닌 경우 삭제할 수 없습니다.
요구 사항에 언급 된 삭제 된 텍스트와 약간 다릅니다. 그러나 당신이 나에게 당신이 해당 레이블을 사용하여 텍스트를 호스팅 할 것이라고 말하는 한, 나는 그것을 삭제할 수 있습니다 ...
get_tag () 함수는 본문 또는 HTML OnClick 이벤트에 배치 할 수 없음을 강조하겠습니다. 그렇지 않으면 전체 페이지의 텍스트가 전혀 삭제됩니다 ...
get_tag () 함수는 텍스트를 삭제하려는 div에 바인딩됩니다.
위의 기사 js는 마우스에서 클릭 한 객체를 가져 와서 다른 버튼을 클릭하여 객체의 구현 코드를 삭제하는 것은 내가 공유 한 모든 컨텐츠입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.