Jump to content

Archived

This topic is now archived and is closed to further replies.

et4891

how can I combine these two jquery scripts?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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);
        });


    });

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.