Hello.
I am just starting to learn JQuery. I want to click on a div to set an
"on" class. When I click on another div, I want the first div to
release the "on" class and restore to default class. I also have a
hover effect that apply to divs that are not shown as "on."
I am trying to set an "If" condition within the "eachfunction" loop.
I've tried the "not" method, but I am not referring to the right
object. Can someone take a look?
Here is my code:
<html>
<head>
<title>test</title>
<style type="text/css">
#portMain{background-color:#99000}
.portDiv{border:solid 2px #444444; font:normal 22px
verdana;padding:
4px}
.portDivOver{border:solid 2px #CCC000; font:normal 22px
verdana;padding:4px}
.portDiv2{border:solid 2px #0000FF; font:normal 22px
verdana;padding:
4px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.portBox = {
box : $('#portMain div'),
len : $('#portMain div').size()
};
$('#portMain').find('div').each(function(i) {
$(this).addClass('portDiv');
})
//**SETCLASS**//
$('#portMain>div').click(function(){
$(this).removeClass().addClass('portDiv2');
$('#portMain').find('div').each(function(i) {
if($('#portMain>div')[i] != $(this)){
$('#portMain>div')[i].removeClass().addClass('portDiv');
}
// $('#portMain>div')[i].not($(this)).removeClass().addClass
('portDiv');
})
})
//**ENDCLICK**//
$('#portMain div').mouseover(function() {
$(this).not('.portDiv2').removeClass().addClass('portDivOver');
})
$('#portMain div').mouseout(function() {
$(this).not('.portDiv2').removeClass().addClass('portDiv');
})
});
//**ENDFUNCT**//
</script>
</head>
<body>
<div id="portMain">
<div>port0</div>
<div>port1</div>
<div>port2</div>
<div>port3</div>
<div>port4</div>
<div>port5</div>
</div>
<a href="http://www.yahoo.com";>clickme</a>
</body>
</html>
