[jQuery] add/removeClass and conditionals
Hi jQueryers,
Extending on the VERY basic functionality of aligning text with the
css (thanks Klaus H.) function... Writing out the logic it goes
something like:
***
for the following list of IDs
on click
if the ID has class "selected"
do nothing (return false)?
else
addClass "selected"
and also removeClass "selected" from the other ID that has it (only
one at a time can have class "selected")
and then do the css text-align magic
***
Got the basics, but missing the removeClass from others bit. Also, I'm
sure there's a much more compact way to write it. Thanks!
The CSS as it stands is just for testing. Eventually, I'll use
background images on the <a> to display icon widgets for link, hover
and selected/active.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>TypeCSSet dev</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
/* <![CDATA[ */
.selected, .selected a { color: red; }
#bodyCopy {text-align: center;}
/* ]]> */
</style>
<script type="text/javascript" src="/js/jquery-1.2.3.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
$(function() {
$('#alignLeft, #alignRight, #alignJustify,
#alignCenter').click(function () {
var $this = $(this);
if($this.is('.selected')) { return false; }
else {
$(this).addClass('selected');
$('#bodyCopy').css('text-align', this.id.replace('align',
'').toLowerCase());
}
});
});
// -->
</script>
</head>
<body>
<ul id="textAlign">
<li id="alignLeft"><a href="#">left</a></li>
<li id="alignRight"><a href="#">right</a></li>
<li id="alignJustify"><a href="#">justify</a></li>
<li id="alignCenter" class="selected"><a href="#">center</a></li>
</ul>
<div id="bodyCopy">
The darkness of the type as set in mass, which is not the same as
the <em>weight</em> of the face itself. The spacing of words and
letters, the leading of lines, and the incidence of capitals, not to
mention the color (i.e., darkness) of the ink and of the paper it is
printed on, all affect the color of the type.
</div>
</body>
</html>