Question

当我有2个网格实例时，jquery不会获取第二个网格列表，但它会为第一个网格列表。这两个网格也适用于Opera，Chrome，Safari和Firefox ..不是IE。

HTML：

<ul id = grid>
     <li><div class = "something><div class = hidden>hi</div></div></li>
     <li><div class = "something><div class = hidden>hi</div></div></li>
     <li><div class = "something><div class = hidden>hi</div></div></li>
</ul>

<ul id = grid>
     <li><div class = "something><div class = hidden>hi</div></div></li>
     <li><div class = "something><div class = hidden>hi</div></div></li>
     <li><div class = "something><div class = hidden>hi</div></div></li>
</ul>

的CSS：

.hidden
{
float: left;
display: none;
width: 150px;
height: 150px
}

.something
{
float: left;
width: 150px;
height: 150px
}

jQuery的：

<script src="js/jquery.js"></script>
<script>
    $(function() {
        $("#grid li").hover(
            function (e) {
                var index = $('#grid li').index(this);
                $(".hidden").eq(index).show();
                },
            function(e) {
                var index = $('#grid li').index(this);
                $(".hidden").eq(index).hide();
            }
        );
    });
</script>

Answer 1

首先，您需要使您的ID唯一，这是有关如何创建有效ID的良好资源：What are valid values for the id attribute in HTML?。你需要做一些工作才能只选择你当前正在悬停的网格后代的.hidden元素，并且.something div的类声明需要一个结束语：

HTML：

<ul class = "grid">
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
</ul>

<ul class = "grid">
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
     <li><div class = "something"><div class = "hidden">hi</div></div></li>
</ul>

jQuery的：

<script src="js/jquery.js"></script>
<script>
    $(function() {
        //using the `.children()` function will be faster than $('.grid li')
        $(".grid").children('li').hover(
            function (e) {

                //since $(this) gets used more than once its a good idea to cache it
                var $this = $(this),

                    //to get an index you can just call `.index()` in an element and it will give you that element's index with respect to its siblings
                    index = $this.index();
                $this.find(".hidden").eq(index).show();
                },
            function(e) {
                var $this = $(this),
                    index = $this.index();
                $this.find(".hidden").eq(index).hide();
            }
        );
    });
</script>

.index()的文档：http://api.jquery.com/index

Answer 2

ID必须是唯一的。请尝试使用课程。

Answer 3

something课后你缺少引号。这适用于IE9和FF8 http://jsfiddle.net/2QK8u/，您的ID必须是唯一的

Answer 4

html元素的id必须是页面唯一的，如果你想要将内容应用于多个元素，请使用类......

还有一些缺失的引号和间距问题。

<强> HTML：

<ul class="grid">
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
</ul>

<ul class="grid">
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
     <li><div class="something"><div class="hidden">hi</div></div></li>
</ul>

<强>使用Javascript：

$(function() {
    $(".grid li").hover(
        function (e) {
            var index = $('.grid li').index(this);
            $(".hidden").eq(index).show();
            },
        function(e) {
            var index = $('.grid li').index(this);
            $(".hidden").eq(index).hide();
        }
    );
});

jQuery和CSS在IE9中无法正常工作

4 个答案: