et4891 Posted August 12, 2015 Share Posted August 12, 2015 I have this html to let people select how how many color div wants to have from 1-3 <div class="color-side-a"> <p class="sideABCD-header">Side A</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="1">Select A Number</option> <option value="1" group="1">1</option> <option value="2" group="1">2</option> <option value="3" group="1">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideA color1"></div> <div name="color2" class="sideA color2"></div> <div name="color3" class="sideA color3"></div> </div> </div> </div><!-- end side A --> <div class="color-side-b"> <p class="sideABCD-header">Side B</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="colors">Select A Number</option> <option value="1" group="colors">1</option> <option value="2" group="colors">2</option> <option value="3" group="colors">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideB color1"></div> <div name="color2" class="sideB color2"></div> <div name="color3" class="sideB color3"></div> </div> </div> </div><!-- end side B --> I have this jquery to show /hide depend on the value chosen which is really just depend on value then show() /hide() the other divs which I didn't show since it's just simple something like value == 1, color1.show() color2.hide() and so on I have this function which then lets people pick the color they wanted in the selectColorBox div I know this code is duplicating but I tried a few ways and not sure how I can combine them in order to reuse most of the codes and if I have side C D E F G I wouldn't need to just copy and paste my codes var colorHolder = null; //used to store the location where color is picked <div class="color-side-a"> <p class="sideABCD-header">Side A</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="1">Select A Number</option> <option value="1" group="1">1</option> <option value="2" group="1">2</option> <option value="3" group="1">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideA color1"></div> <div name="color2" class="sideA color2"></div> <div name="color3" class="sideA color3"></div> </div> </div> </div><!-- end side A --> <div class="color-side-b"> <p class="sideABCD-header">Side B</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="colors">Select A Number</option> <option value="1" group="colors">1</option> <option value="2" group="colors">2</option> <option value="3" group="colors">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideB color1"></div> <div name="color2" class="sideB color2"></div> <div name="color3" class="sideB color3"></div> </div> </div> </div><!-- end side B --> this is my simple div box for user to pick colors <div class="colorSelectBox"> <div>Special</div> <div> <div class="pink" value="pink"></div> <div class="black" value="black"></div> <div class="yellow" value="yellow"></div> </div> <div class="clear"></div> <div>Original</div> <div> <div class="red"></div> <div class="blue"></div> <div class="grey"></div> <div class="green"></div> <div class="white"></div> </div> </div> how can I combine those two duplicated jquery into one function that I can further use more later if needed? Quote Link to comment Share on other sites More sharing options...
scootstah Posted August 12, 2015 Share Posted August 12, 2015 You have not shown us any Javascript. Quote Link to comment Share on other sites More sharing options...
et4891 Posted August 13, 2015 Author Share Posted August 13, 2015 (edited) You have not shown us any Javascript. oh no! sryz didn't even realize that....my bad..weird I can't seem to edit my post... let me post the scripts here var colorHolder = null; //used to store the location where color is picked $('.color-side-a .number-of-color-field > div').on('click', function(){ colorHolder = $(this).attr('class'); $('.colorSelectBox').css({"left": "100px", "top": "570px"}).toggle(); $('div.black').add('div.yellow').on('click', function(){ var colorAttr = $(this).attr('value'); var splitClass = colorHolder.split(" "); $('.color-side-a').closest('div').find('.'+splitClass[0] + '.'+splitClass[1]).css({"background": colorAttr}).attr('value', colorAttr); }); }); $('.color-side-b .number-of-color-field > div').on('click', function(){ colorHolder = $(this).attr('class'); $('.colorSelectBox').css({"left": "100px", "top": "570px"}).toggle(); $('div.black').add('div.yellow').on('click', function(){ var colorAttr = $(this).attr('value'); var splitClass = colorHolder.split(" "); $('.color-side-b').closest('div').find('.'+splitClass[0] + '.'+splitClass[1]).css({"background": colorAttr}).attr('value', colorAttr); }); }); Edited August 13, 2015 by et4891 Quote Link to comment Share on other sites More sharing options...
scootstah Posted August 13, 2015 Share Posted August 13, 2015 You could... 1. Create a common class that you are binding to, instead of .color-side-a and .color-side-b. Like, <div class="color-side color-side-a"> ... </div> <div class="color-side color-side-b"> ... </div> $('.color-side .number-of-color-field > div').on('click', function(){ ... }); 2.Use multiple selectors on the same event. $('.color-side-a, .color-side-b').on('click', '.number-of-color-field > div', function(){ ... }); 3.Make a function that you can call from both events. function pickColor(selector, colorAttr) { var colorHolder = selector.attr('class'); $('.colorSelectBox').css({"left": "100px", "top": "570px"}).toggle(); $('div.black').add('div.yellow').on('click', function(){ var splitClass = colorHolder.split(" "); selector.closest('div').find('.'+splitClass[0] + '.'+splitClass[1]).css({"background": colorAttr}).attr('value', colorAttr); }); } $('.color-side-a .number-of-color-field > div').on('click', function(){ pickColor($('.color-side-a'), $(this).attr('value')); }); $('.color-side-b .number-of-color-field > div').on('click', function(){ pickColor($('.color-side-b'), $(this).attr('value')); }); Unless there is some context that I don't know of, #1 is the best choice in my opinion. Quote Link to comment Share on other sites More sharing options...
et4891 Posted August 13, 2015 Author Share Posted August 13, 2015 Unless there is some context that I don't know of, #1 is the best choice in my opinion. ah! ok so it's pretty much making them all have the another class that's the same will give me the chance to use $(this) which means I didn't even need to combine just one code with $(this) would then work. that's the idea for the fist choice right? Quote Link to comment Share on other sites More sharing options...
scootstah Posted August 14, 2015 Share Posted August 14, 2015 It's just a way to re-use code in the way that you are trying to do. It is a pretty typical jQuery solution: apply some class to every element that you want to have some functionality, and then bind to that one class and boom, everything gets it. And yes, $(this) will still reference the actual element that was clicked, so you could still differentiate between someone clicking color-side-a and color-side-b, if you wanted to. 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.