Question

我正在开发一个项目，它要求我从类别导航中选择一个项目，其中包含“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>

感谢那些回复的人，感谢您的时间。

Answer 1

您可以将所有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评论..

jQuery。每个问题

1 个答案: