Question

可能有相似的帖子，但我无法理解其中的大量内容。我的问题是我有

       <aside class="main-aside-info">
            <ul id="main-aside-info-ul">
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
                <img id="triangle" src="images/triangle.png" /><li>Title</li>
            </ul>
        </aside>

这个img中的每一个都隐藏了可见性，我想对它做一个好看的功能，这样我可能不得不使用子类选择器或类似的东西。我尝试使用如下的愚蠢代码来完成它：

$( document ).ready(function() {
    $("#one").click(function(){
    $("#triangle1").css('visibility', 'visible');

});
    $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});
            $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});
                    $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});
                            $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});
                                    $("#two").click(function(){
    $("#triangle2").css('visibility', 'visible');
});

}）;

等等。但是我想这个代码并不是最优的（即使在这里，我尝试给出不同的id＆＃39; s）。你能帮我解决一下我的职能吗？

Answer 1

首先，我们必须使HTML有效。两个主要问题：

id值必须是唯一的
您无法将img元素直接放在ul内; ul和ol的唯一有效子项为li和template

因此，我们将img元素放在<{em}里面，然后使用li而不是class：

id

然后您可以使用<aside class="main-aside-info"> <ul id="main-aside-info-ul"> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> <li><img class="triangle" src="images/triangle.png" />Title</li> </ul> </aside>伪选择器选择它们：

:eq

或$("aside .triangle:eq(2)"); // Finds the third函数：

.eq

或者实际上，如果您关闭父母的$("aside .triangle").eq(2); // Finds the third，您甚至不需要课程：

id

然后：

<aside class="main-aside-info">
    <ul id="main-aside-info-ul">
        <li><img src="images/triangle.png" />Title</li>
        <li><img src="images/triangle.png" />Title</li>
        <li><img src="images/triangle.png" />Title</li>
        <li><img src="images/triangle.png" />Title</li>
        <li><img src="images/triangle.png" />Title</li>
        <li><img src="images/triangle.png" />Title</li>
        <li><img src="images/triangle.png" />Title</li>
        <li><img src="images/triangle.png" />Title</li>
    </ul>
</aside>

或$("#main-aside-info-ul img:eq(2)"); // Finds the third函数：

.eq

jQuery子元素选择

1 个答案: