Color swatch selector with multiple mouseover and mouseout functions

I am working on a simple mouseout and mouseover functions. Basically, I have color boxes (or swatches) and I have to get the color of the specific box when hovered and when selected. You can see how it works in the fiddle.

So I came out with a working script. But I am not sure how I can optimize or shorten the script since I will be having several color swatches. I made 2 samples swatches in this demo.

The question: is there a way to optimize/shorten it? Contents in the script were almost the same for each functions. The class names were the only ones changed.



`/ COLOR SWATCH 1/

$(".color").mouseover(function() {
var hex = $( this ).css("background-color");
var hexVal = $( this ).attr("value");
var styles = {
backgroundColor : hex
};
$('.selected-color').css(styles);
$('.selected-color').text(hexVal);
});

$(".color").mouseout(function() {
var hex = $('.active').css( "background-color");
var hexValue = $('.active').attr("value");
var styles = {
backgroundColor : hex
};
$('.selected-color').empty();
$('.selected-color').css(styles);
$('.selected-color').text(hexValue);
});

$('.color').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
var hex = $(this).css("background-color");
var hexVal = $('.active').attr("value");
var styles = {
backgroundColor : hex
};
$('.selected-color').css(styles);
$('.selected-color').text(hexVal);
});

/ COLOR SWATCH 2/

$(".color-2").mouseover(function() {
var hexs = $( this ).css("background-color");
var hexVal = $( this ).attr("value");
var styles = {
backgroundColor : hexs
};
$('.selected-color-2').css(styles);
$('.selected-color-2').text(hexVal);
});

$(".color-2").mouseout(function() {
var hex = $('.active-2').css( "background-color");
var hexValue = $('.active-2').attr("value");
var styles = {
backgroundColor : hex
};
$('.selected-color-2')

HTML abuse

The HTML5 specification does not allow a ` element to have a value attribute. You can use a data-* attribute (named data-color, for example). A title attribute would also be reasonable.

You are misusing CSS classes as IDs. An ID is a unique name for an individual element. A class is a set of elements that should all be treated alike. You should not have color and color-2 as two class names. Rather, they should be a single class.

Confused terminology

Your wording is a bit off, in my opinion. Each individual sample is a "swatch". A color selector is a widget consisting of three swatches.

When you make a decision by clicking on a swatch, the swatch isn't just "active" — I would say that that color has been selected.

Based on the above, I would rename…



• the color and color-2 classes both to swatch






• the color-swatch class to swatch-selector






• the active class to selected




jQuery

Once you rename the classes so that both widgets have the same class names, it becomes possible to write code that treats the swatch selector as a generic widget.

If you need to define both a mouseover and a mouseout handler, use hover() instead.



$(function() {
'use strict';

function showActiveColor($selector) {
var selectorId = $selector.attr('id');
var $selected = $selector.find('.swatch.selected');
$('#active-' + selectorId).empty()
.text($selected.data('color'))
.css({ backgroundColor: $selected.css('background-color') });
}

$('.swatch-selector .swatch').hover(
function mouseOver(event) {
var colorName = $(this).data('color');
var color = $(this).css('background-color');
var selectorId = $(this).closest('.swatch-selector').attr('id');
$('#active-' + selectorId).text(colorName)
.css({ backgroundColor: color });
},
function mouseOut(event) {
showActiveColor($(this).closest('.swatch-selector'));
}
).click(function onClick(event) {
$(this).addClass('selected')
.siblings().removeClass('selected');
});

// Initialization so that you don't have to hard-code the span's
// background-color and text to match the initial selection
$('.swatch-selector').each(function(index, el) { showActiveColor($(el)); });
});
.swatch-selector .swatch {
width: 25px;
height: 25px;
float: left;
border: 1px solid #313131;
margin-right: 5px;
}
.swatch-selector .swatch.selected {
border: 3px solid #151515;
}
.color-name {
width: 90px;
height: 20px;
color: #FFF;
text-align: center;
padding: 2px;
}


SELECTED COLOR 1:





SELECTED COLOR 2:




`

StackExchange Code Review Q#118226, answer score: 6