Hello Community, I am working on a project, which requires me to select a item from the categories navigation, which contains a "rel" attribute like (category-action, category-adventure, etc). As you can see from my demo: My Demo Script, it works on the first two categories, however, it does not work with the last two. Why is this? and how can I fix it?
Here is my current script:
$(document).ready(function()
{
$("#sidebar ul li a").each(function()
{
var categories = $(this).attr("rel");
var entries = $("#content-main .blog-entry").attr("rel").split(" ")
$(this).hover(function()
{
for(i = 0; i < entries.length; i++)
{
if(entries[i] == categories)
{
$("#content-main .blog-entry[rel~="+categories+"]").each(function()
{
$("#content-main .blog-entry[rel~="+categories+"]").addClass("match");
});
}
}
},
function()
{
$("#content-main .blog-entry[rel~="+categories+"]").each(function()
{
$("#content-main .blog-entry[rel~="+categories+"]").removeClass("match");
});
});
});
});
and here is my html file, if you don't want to view the web page... although I'd strongly suggest viewing it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Big Fish Challenge</title>
<link href="static/css/foo.css" type="text/css" media="all" rel="stylesheet" />
<link href="static/css/common.css" type="text/css" media="screen" rel="stylesheet" />
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="static/js/common.js" type="text/javascript"></script>
<body>
<!-- primary container -->
<div id="container">
<!-- site header -->
<div id="header">
<h1><a href="index.html">ClassicGamer.com</a></h1>
</div>
<!--/site header -->
<!-- content wrapper -->
<div class="clearfix" id="content-wrapper">
<!-- sidebar -->
<div class="float_left" id="sidebar">
<h3 class="header-categories">Categories</h3>
<ul>
<li><a href="#" rel="category-action">Action</a></li>
<li><a href="#" rel="category-adventure">Adventure</a></li>
<li><a href="#" rel="category-card-games">Card Games</a></li>
<li><a href="#" rel="category-rpg">RPG</a></li>
</ul>
</div>
<!--/sidebar -->
<!-- content main -->
<div class="float_left" id="content-main">
<div class="blog-entry" rel="category-action category-adventure">
<h1>My Action Game</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id nibh purus. Aliquam interdum commodo libero, quis aliquet massa lobortis vel. Nunc rhoncus ullamcorper nulla, ac molestie lorem blandit a. Pellentesque ut massa tellus[...]</p>
</div>
<div class="blog-entry" rel="category-action">
<h1>My Action Game</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id nibh purus. Aliquam interdum commodo libero, quis aliquet massa lobortis vel. Nunc rhoncus ullamcorper nulla, ac molestie lorem blandit a. Pellentesque ut massa tellus[...]</p>
</div>
<div class="blog-entry" rel="category-rpg">
<h1>My Action Game</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id nibh purus. Aliquam interdum commodo libero, quis aliquet massa lobortis vel. Nunc rhoncus ullamcorper nulla, ac molestie lorem blandit a. Pellentesque ut massa tellus[...]</p>
</div>
</div>
<!--/content main -->
</div>
<!--/content wrapper -->
<!-- footer -->
<div id="footer">
</div>
<!--/footer -->
</div>
<!--/primary container -->
</body>
</html>
A million thanks to those who reply, thank you for your time.