jQuery。每个问题

我正在开发一个项目，这需要我从类别导航中选择一个项目，其中包含像类别动作，类别冒险等的“rel”属性。正如你可以从我的演示中看到的：My Demo Script，它适用于前两个类别，但是它不适用于最后两个类别。为什么是这样？我该如何解决它？jQuery。每个问题

这里是我当前的脚本：

$(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>

一百万感谢那些谁回答，谢谢您的时间。

来源

2010-10-31 Fo0

你可以简化你的所有的JavaScript代码来

$('#sidebar li a').hover(
    function(){ 
     $('div[rel*=' + $(this).attr('rel') +']').addClass('match'); 
     }, 
    function(){ 
     $('div[rel*=' + $(this).attr('rel') +']').removeClass('match'); 
    } 
);

，甚至更简单的办法是使用this.rel代替了jQuery相当于$(this).attr('rel')作为@lonesomeday评论..

来源

2010-10-31 22:57:12

+1伟大的答案。虽然更简单，但是，会是'this.rel'。 – lonesomeday 2010-10-31 23:01:20

@ lonesomeday，非常真实..添加它.. – 2010-11-01 00:13:12

jQuery。每个问题

回答

相关问题