jQuery Text Colour Change Help

**Primalscientist** · 07-08-2012 09:46 AM

Hi All,

I have columns of text that start out with the color black, but you have an option to change the color.

I have done my jQuery code to change color when you press a blue, red or black button but the code is quite long.
Does anyone know how I can reduce it?

It is as follows:

Code:

$(document).ready(function(){		
		$("#bluesquare1").click(function(){
			$("#textblocka").css({"color":"blue"});
		});	
		$("#redsquare1").click(function(){
			$("#textblocka").css({"color":"red"});
		});	
		$("#blacksquare1").click(function(){
			$("#textblocka").css({"color":"black"});
		});	
		$("#bluesquare2").click(function(){
			$("#textblockb, a").css({"color":"blue"});
		});	
		$("#redsquare2").click(function(){
			$("#textblockb, a").css({"color":"red"});
		});	
		
		$("#blacksquare2").click(function(){
			$("#textblockb, a").css({"color":"black"});
		});	
		$("#bluesquare3").click(function(){
			$("#textblockc").css({"color":"blue"});
		});	
		$("#redsquare3").click(function(){
			$("#textblockc").css({"color":"red"});
		});	
		$("#blacksquare3").click(function(){
			$("#textblockc").css({"color":"black"});
		});	
		
		
	});

The div in my code is this:

Code:

<div id = "blacksquare1"></div>
<div id = "redsquare1"></div>
<div id = "bluesquare1"></div>

**Padonak** · 07-08-2012 02:24 PM

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>...</title>
<style type="text/css">
body{text-align:center;font-family:Verdana,Arial;font-size:14px;background-color:#fff;color:#000;padding:0px;margin:30px 0px 0px 0px;}
#blacksquare1,#blacksquare2,#blacksquare3,#redsquare1,#redsquare2,#redsquare3,#bluesquare1,#bluesquare2,#bluesquare3{
display:inline-block;width:30px;height:30px;margin:2px;border:2px solid Darkorange;cursor:pointer;
}
#blacksquare1,#blacksquare2,#blacksquare3{background-color:#000;}
#redsquare1,#redsquare2,#redsquare3{background-color:Crimson;}
#bluesquare1,#bluesquare2,#bluesquare3{background-color:Lightsteelblue;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){		
/*$("#bluesquare1").click(function(){$("#textblocka").css({"color":"blue"});});
$("#redsquare1").click(function(){$("#textblocka").css({"color":"red"});});
$("#blacksquare1").click(function(){$("#textblocka").css({"color":"black"});});

$("#bluesquare2").click(function(){$("#textblockb, a").css({"color":"blue"});});
$("#redsquare2").click(function(){$("#textblockb, a").css({"color":"red"});});
$("#blacksquare2").click(function(){$("#textblockb, a").css({"color":"black"});});

$("#bluesquare3").click(function(){$("#textblockc").css({"color":"blue"});});
$("#redsquare3").click(function(){$("#textblockc").css({"color":"red"});});
$("#blacksquare3").click(function(){$("#textblockc").css({"color":"black"});});
*/

/* DO NOT FORGET TO CHANGE THE TEXTBLOCK's ID LAST CHARACTER FROM LETTER TO NUMBER */
$('div[id*=square]').click(function(){
var id=$(this).attr('id'),
col=id.substring(0,id.indexOf('square')),
tblock_num=id.substring(id.length-1,id.length),
dummy=(tblock_num=='2')?', a':'';
$('#textblock'+tblock_num+dummy).css('color',col);
});

});
</script>
</head>
<body>
<div id="blacksquare1">&nbsp;</div><div id="redsquare1">&nbsp;</div><div id="bluesquare1">&nbsp;</div><br />
<div id="blacksquare2">&nbsp;</div><div id="redsquare2">&nbsp;</div><div id="bluesquare2">&nbsp;</div><br />
<div id="blacksquare3">&nbsp;</div><div id="redsquare3">&nbsp;</div><div id="bluesquare3">&nbsp;</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="textblock1">bla-bla-bla</div>
<div id="textblock2">bla-bla-bla</div>
<div id="textblock3">bla-bla-bla</div>
<br /><br /><br /><br /><br />
<a href="#">link</a>&nbsp;&nbsp;&nbsp;<a href="#">link</a>&nbsp;&nbsp;&nbsp;<a href="#">link</a>
</body>
</html>

**Primalscientist** · 07-08-2012 03:01 PM

This is ace.

Thanks so much!!
Helped me out BIG TIME!!!

Daz.

**Padonak** · 07-08-2012 03:25 PM

good to hear ))

Thread: jQuery Text Colour Change Help

Thread Tools

Display

jQuery Text Colour Change Help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions