jQuery Tutorial #3 - Writing Smarter, Better Code - jQuery Tutorial for Beginners

okay so J querer number three uh if you didn't catch one and two they're in the description we're just going to move on uh so where we left off is we copied and pasted this piece of code four times because we were listening to four different buttons and we wanted to interact with four different panels it's not bad there's nothing wrong with this but it's terrible in that this thing is going to be huge if we're a little bit smarter we can actually make one thing that listens to all the buttons and talks to all the CL the panels so let's do this I'm going to show you kind of a couple different ways that you can do this uh and before we get into that I need to show you um how we can Target by attribute let me show you real quick what I mean by that I'm going to add this button and if you guys know from HTML 5 if you go data Dash you can make your own attributes I can go data Dash panel equals panel one and so then what I can do is I can actually find with J Creer I'm going to go over here to my console and just do it real time I'm going to look for a button that has an attribute of data panel equals panel one there you go and it found my button it's that first button so you can see if I use these brackets I can enter any attribute I can actually do this if I want to do um um ID I can actually search for idid because ID is an attribute ID equals btn1 so there you go same thing it found the panel and I found the button that has an ID of btn1 so that's how we search by uh attribute so I'm going to do now is I'm going to actually add data panel and I'm going to add the panel ID I'll actually go panel ID how's that makes a little more sense and then I'm going to put the ID of the panel that it relates to panel equal panel one panel two panel three panel four all right so let's get rid of this copy paste we're going to be smarter A good rule of web development is Dr y do not repeat yourself well don't repeat yourself this before this was not very dry we need to do what's called dry it up we need to stop repeating ourselves and write this one piece of code that does all the things that the copy and pasting would have done so now instead of button one let's get rid of these IDs here and we're going to add classes instead panel button so now these are all going to be a panel button because you'll know you can only have one ID but we can have multiple classes so now instead of targeting by ID we're going to Target by panel button and now this one rule is going to listen to All panel buttons whenever you click so now if I click on panel button one or if I click on button any of the buttons it should be toggling panel one so progress not where we want to be yet but we're getting there so now what we want to do is we want to do something that's called let's get the ID panel ID panel ID equals and we don't know which button was clicked cuz it might have been button one it might have been button two might have been button three might have been button four so we actually want to do is this no PR no Quotes no double quotes just this and so what that means whenever you do jQuery this it's going to take whatever the action was on and we're going to start using that guy so I can go this dot ATR data panel ID so that's going to look for an attribute of data- panel ID that's going to give me what that is so now panel ID if I go alert panel ID what it'll do is it'll get the panel ID and then it will alert it to me here I'll show you panel one if I click here panel three so now we know what panel we want to do something with great we're almost there um so instead of alerting panel ID I want to do hash Plus panel ID because I didn't store the hash up there I guess I could have stored the hash up there if I wanted to but for the sake of the lesson I'll show you how to put two strings together so we're going to put the hash Plus panel ID which doesn't do addition it just kind of bumps them together so hash Plus panel ID toggle so now we're going to listen to any panel button and when you click on it it's going to grab the panel ID out of that button and it's going to then go find that panel and toggle it see if it works nice nice and we win we dried it up we added one more line to our code and we have a much much cleaner thing uh you another way you can dry stuff up is say whenever you click this you want to show it and you want to you know give it some new content so what I can do is um ver content equals my new awesome content so now I can not only toggle it but I can make sure that panel ID Plus panel body HTML is content no no Quotes no double quotes which means I'm looking for a variable if I did quotes like this it would change it to the actual text of Co n tent which is kind of what it already is I don't want that I want it to look for a variable called content that I made up here I made a variable called content and I said it's my awesome new content so now it should there you go they're automatically going to get my new awesome content great another thing uh you can do is you can do HTML empty quotes to just kind of clean it out so now when you click on it nothing at all so that's kind of a way that we would dry up jQuery and start to reuse things that's also how you find out more information about who has clicked that this thing this I could also go this ATR ID if I wanted to find out the ID of whoever was clicked on um and that's going to alert my ID whoops can't do that because there are no IDs anymore I got rid of the IDS didn't I yep well if the IDS were still printed on here you'd be able to do that so anyway that's how you dry up jQuery