Question

I am trying to figure out a way to create a class to group together a set of effects that performs the same effects but just different color. I am a procedural guy and OOP is something I am still learning and need some guide.

I am trying to create a ‘tag’ lookalike shape using ‘a’ tag that changes the font and background color when mouseover, mouseout or when clicked. But I want to reuse the code for many other color variation so I hate to keep typing the code over and over again.

How do I group the function like a Jquery plugin?

**CSS**

a.cbSizeTag {
display: inline-block;
padding: 4px 4px 4px 4px;
margin: 0 2px 6px 0;
background: #F5F5F1;
    text-decoration:  none;
}

a.cbShipmentTag {
display: inline-block;
padding: 4px 4px 4px 4px;
margin: 0 2px 6px 0;
background: #F5F5F1;
text-decoration:  none;
}

**Jquery**

$('.cbSizeTag').mouseover(function() {
$(this).css('background-color','#076EA0')
$(this).css('color','#FFF')
});

$('.cbSizeTag').mouseout(function() {
if ($(this).hasClass('selected')){
    $(this).css('background-color','#076EA0')
    $(this).css('color','#FFF')
} else {
    $(this).css('background-color','#F5F5F1')
    $(this).css('color','#4B94BF')
}
});

$('.cbSizeTag').click(function() {
$(this).toggleClass('selected');
if ($(this).hasClass('selected')){
    $(this).css('background-color','#076EA0')
    $(this).css('color','#FFF')
} else {
    $(this).css('background-color','#F5F5F1')
    $(this).css('color','#4B94BF')
    }
 });

$('.cbShipmentTag').mouseover(function() {
$(this).css('background-color','#B80000')
    $(this).css('color','#FFF')
});

$('.cbShipmentTag').mouseout(function() {
if ($(this).hasClass('selected')){
$(this).css('background-color','#B80000')
$(this).css('color','#FFF')
} else {
    $(this).css('background-color','#F5F5F1')
$(this).css('color','#4B94BF')
}
});

$('.cbShipmentTag').click(function() {
$(this).toggleClass('selected');
if ($(this).hasClass('selected')){
$(this).css('background-color','#B80000')
$(this).css('color','#FFF')
} else {
$(this).css('background-color','#F5F5F1')
$(this).css('color','#4B94BF')
}
});

**HTML**

<a href="javascript:void(0)" class="cbSizeTag">S</a>
<a href="javascript:void(0)" class="cbSizeTag">M</a>
<a href="javascript:void(0)" class="cbSizeTag">L</a>
<br>
<a href="javascript:void(0)" class="cbShipmentTag">DHL</a>
<a href="javascript:void(0)" class="cbShipmentTag">FEDEX</a>
<a href="javascript:void(0)" class="cbShipmentTag">Free</a>

So if I were to create another 10 functions with different colors, I would have create 10 sets of CSS, 10×3 sets of Jquery code and I think there must be a better way to write it. Can anyone help with a class-template example so I can learn?

Thanks.

Answer 1

Instead of binding this to a specific class, you can use a custom attribute(data-startColor, data-endColor) with the value of the start and end color, then bind a single block of this code to all elements that match $("[data-startColor]"), and access the custom colors by $(this).attr("data-startColor") and $(this).attr("data-endColor") inside the events you binded.