Я работаю над проектом, который требует, чтобы я выбрал элемент из навигации по категориям, который содержит атрибут rel, например (category-action, category-adventure и т. Д.).Как вы можете видеть из моей демонстрации: My Demo 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");
});
});
});
});
и вот мой HTML-файл, если вы не хотите просматривать веб-страницу ... хотяЯ настоятельно рекомендую просмотреть его.
<!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>
Миллион, спасибо тем, кто ответит, спасибо за ваше время.