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。每個問題

回答

相關問題