Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use JavaScript to achieve comment and like function". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use JavaScript to achieve comment and like function" can help you solve the problem.

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])) }} this is the end of the content about "how to use JavaScript to achieve comment and like function". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.