Jump to content

how can I combine these two jquery scripts?


et4891

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?

Link to comment
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);
        });


    });
Edited by et4891
Link to comment
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.

Link to comment
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?

Link to comment
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.

  • Like 1
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.