How to realize the function of comment and like by JavaScript

This article mainly explains "how to achieve comment and like function in JavaScript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve comment and like function in JavaScript".

Effect picture:

1) implement the function of deleting shared content

Use the event agent to click the close button to delete the shared content.

Delete event:

Using the event agent function, events are added to the parent element node to reduce the amount of code and the system running load.

When the event is proxied, use the srcElement attribute in the event object to get the trigger element.

IE browsers support window.event.srcElement, while firefox supports window.event.target.

So, to be compatible in firefox, you only need to change one code: change var el = e.srcElement to var el = e.srcElement | | e.target

RemoveChild () means to delete the child element, so to delete the current element el, first use parentNode to find the parent node, and then delete the el element using removeChild (el).

Var list = document.getElementById ('list'); var boxs = document.getElementsByClassName (' box'); / / remove node function function removeNode (node) {Node [XSS _ clean] .removeChild (node);} / / event agent for (var iDe0; i10? M:'0' + m; d = d > 10? D:'0' + d; h = h > 10? H:'0' + h; mi = mi > 10? mi:'0' + mi; return y +'-'+ m +'-'+ d +'+ h +':'+ mi;}}

5) realize the like reply function.

There is a my attribute in the a tag of the like button to indicate whether you have liked it or not. When the my value is 0, the total will be added to the like button, and when the my value is 1, the total will be minus 1 when the like button is clicked.

Js Code:

/ / reply function praiseReplay (el) {var oldTotal = parseInt (el.getAttribute ('total')); var my = parseInt (el.getAttribute (' my')); var newTotal = 0; if (my = = 0) {newTotal = oldTotal + 1; el.setAttribute ('total',newTotal); el.setAttribute (' my',1) El [XSS _ clean] = newTotal + 'unlike';} else {newTotal = oldTotal-1; el.setAttribute ('total',newTotal); el.setAttribute (' my',0); el [XSS _ clean] = (newTotal = = 0)?': newTotal + 'like' } el.style.display = (newTotal = = 0)?': 'inline-block';}

6) realize the deletion and reply function of the content in the reply list

Reply to other people's comments and delete your own comments

Js Code:

/ / reply function operateReply (el) {var commentBox = el [XSS _ clean] [xss_clean] [xss_clean]; / / comment container var box = commentBox [XSS _ clean] [xss_clean] [xss_clean]; / / the shared container var textarea = box.getElementsByTagName ('textarea') [0]; var user = commentBox.getElementsByClassName (' user') [0]; var txt = el [XSS _ clean] If (txt = = 'reply') {textarea.onfocus (); textarea.value = 'reply' + user [XSS _ clean]; textarea.onkeyup ();} else {removeNode (el [XSS _ clean] [xss_clean] [xss_clean])) }} Thank you for your reading. the above is the content of "how to achieve the comment and like function of JavaScript". After the study of this article, I believe you have a deeper understanding of how to implement the comment and like function of JavaScript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!