Question

I have a form with several inputs. When these inputs are clicked, a color picker addon for jquery (farbtastic) is loaded within a fade in/out dropdown.

Each input is unique and will load a different color picker each time. The code I’m using for this is:

// Color Picker Popup Menus
$('html, #mgBgColor, input').click(function() { 
    $('#picker-mgBgColor').fadeOut('fast'); 
});

$('#mgBgColor, #picker-mgBgColor').click(function(e){ 
    if(!$('#picker-mgBgColor').is(":visible")) { 
        $('#picker-mgBgColor').stop().fadeIn('fast'); 
    }
    e.stopPropagation(); 
});

#mgBgColor is the ID of the specific input field.

#picker-mgBgColor is the ID that calls the color picker

The HTML:

<p>
    <label for="bg">BG color:</label>
    <input type="input" id="mgBgColor" name="bg" value="" />    
    <span id="picker-mgBgColor"></span>
</p>
<p>
<label for="textcolor">Text color:</label>
    <input type="input" id="mgTextColor" name="textcolor" value="" />
    <span id="picker-mgTextColor"></span>   
</p>

My problem is that I’m repeating this big chunk of code for several different input fields. How can I code just one dropdown menu that works for all of the color picker id’s ?

Answer 1

First, add classes to each type of element to group them together:

               <p>
                    <label for="bg">BG color:</label>
                    <input class="input-class" type="input" id="mgBgColor" name="bg" value="" />    
                    <span class="picker" id="picker-mgBgColor"></span>
                </p>
                <p>
                    <label for="textcolor">Text color:</label>
                    <input class="input-class" type="input" id="mgTextColor" name="textcolor" value="" />
                    <span class="picker" id="picker-mgTextColor"></span>   
                </p>

Then you can target the elements by these classes:

$('html, .input-class, input').click(function() { 
    $('.picker').fadeOut('fast'); 
});

$('.input-class').click(function(e){ 
    if(!$(this).next().is(":visible")) { 
        $(this).next().stop().fadeIn('fast'); 
    }
    e.stopPropagation(); 
});

$('.picker').click(function(e){ 
    $(this).fadeOut('fast');
    e.stopPropagation(); 
});​

Here is a demo: http://jsfiddle.net/jasper/xW2g6/