how can I combine these two jquery scripts?

[et4891]

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?

[scootstah]

You have not shown us any Javascript.

[et4891]

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

[scootstah]

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.

[et4891]

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?

[scootstah]

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.