Single Function to Control Multiple Toggles in jQuery (this, closest, find, stop, execute) скачать в хорошем качестве

Single Function to Control Multiple Toggles in jQuery (this, closest, find, stop, execute)

How to use single function to handle multiple elements at the same page in jQuery? My technical manager asked me to create a toggle functionality. I created it right away. But it was good for one element. If I took copy of that code block and looked at result, both code blocks were responding to one click. I could not use multiple toggles for that function at same page. In this video we are fixing that. Only clicked block should be toggled, and not the other. The issue was because we targeted generic classes and did not took into consideration which block was triggered at first place. There should be a control to identify which block was triggered and only that block should be toggled or respond to click. This tip is not just for toggle. Whenever you create something, make sure you keep in mind that there may be copies of that code block. For example you may need more than one toggle or accordion or something like that on a single page. Only that thing should respond to click that was triggered and not its copy or duplicate. This is very important lesson. We will use jQuery document ready to call our function. Outside that we will write that function. In this example following methods and keyword play important role. 'this' keyword jQuery closest jQuery find jQuery stop (I forgot to mention it) jQuery toggle jQuery slideToggle When we click at title of our card, by using 'this' keyword we get only that element which was clicked. Then we grab its closest outer element that is toggle-wrap and we find toggle-area inside it. Then we toggle it. After find you can use jQuery 'stop' method for precaution. Remember this keyword, closest and find in jQuery. Use these to lock an area and do something only inside that area. It will not affect other similar elements at the page. Only current block of code will respond to click in this technique. And this is how you overcome this issue. By using this technique, you can code functionality once and apply it for multiple elements at same page. !!! I forgot one thing to mention in this video. If your function is repeating or going in a loop before stopping, use stop jQuery method 'stop()' after you use 'find()' jQuery method. Chain it after find() and you will be good. Here is stop() method    • jQuery This Closest Find Stop Stop Stop | ...   ✅ How To Hide / Protect JavaScript Code - Techniques and Tools    • How To Hide / Protect JavaScript Code | Ja...   ✅ React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast    • How to Prevent TypeError Cannot Read Prope...   ✅ Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method    • How to Find Sum of An Array of Numbers in ...   ✅ Get URL Parameters in JavaScript | URLSearchParams    • Get URL Parameters in JavaScript | URLSear...   ✅ DIV to PDF, Iframe to PDF using JavaScript Only (with CSS & Images Support)    • DIV to PDF, Iframe to PDF using JavaScript...   ✅ How To UnMinify JavaScript Minified Files Easily | Decrypt Complex JavaScript Code    • How To UnMinify JavaScript Minified Files ...   ✅ Toggle Class in Vanilla JavaScript | Learn JavaScript    • Toggle Class in Vanilla JavaScript   ✅ How to Execute a JavaScript File by using NPM    • How to Run a JavaScript File using NPM   ✅ Get User's Location (Country, State, City) with Free Unlimited API Access | PHP & JavaScript    • Get User Location (Country, State, City) w...   ✅ Replace jQuery with Vanilla JavaScript Code Easily | jQuery vs JavaScript    • Replace jQuery with Vanilla JavaScript Cod...   ✅ Toggle in Vanilla JavaScript    • Toggle in Vanilla JavaScript | Pure JavaSc...   ✅ MINIFY JAVASCRIPT FILES & FOLDERS in Multiple Ways (Command Line & Code Editor)    • MINIFY JAVASCRIPT FILES & FOLDERS in Multi...   ✅ JavaScript vs jQuery | Difference between JavaScript and jQuery    • JavaScript vs jQuery | Difference between ...   ✅ JavaScript Variable Redeclare & Reassign | VAR vs LET vs CONST | Practical Examples    • VAR vs LET vs CONST | JavaScript Variable ...   Thank You! Channel Support 👍 LIKE VIDEO 👊 SUBSCRIBE 🔔 PRESS BELL ICON ✍️ COMMENT Channel:    / webstylepress   Website: https://www.webstylepress.com FaceBook:   / webstylepress   Twitter:   / webstylepress   Instagram:   / webstylepress   LinkedIn:   / webstylepress   GitHub: https://github.com/webstylepress #jquery #javascript #webdevelopment #js #webstylepress #functions #methods