我有以下jQuery:
$(".score-window a:first-child").click(function() {
$(".score-window").hide();
$(".login-window").show();
});
$(".score-window a:nth-child(2)").click(function() {
$(".score-window").hide();
$(".register-window").show();
});
其中包含以下HTML:
<div class="score-window">
<i class="icon-remove" title="Close"></i>
<p>In order to view your score, you have to <a href="#">log in</a>.</p><br>
<p>Don't have an account yet? <a href="#">Register</a>! Totally free and you'll get the ability to save your scores.</p>
</div>
我在score-window
课程中只有两个链接,所以我不明白为什么这不起作用。
答案 0 :(得分:2)
您有两个链接,但每个链接都是其父级p
的唯一子级,因此它们仅匹配a:first-child
。链接的父级不是.score-window
,而是p
。但是,p
元素的父级(以及i
和br
元素)是 .score-window
。
您需要修改选择器以使用:nth-child()
替换p
元素,然后选择每个元素下的a
。有一个i
是第一个孩子,而br
个元素之间的p
似乎不需要它们。您应该能够将其删除然后执行此操作:
$(".score-window p:nth-child(2) a").click(function() {
$(".score-window").hide();
$(".login-window").show();
});
$(".score-window p:nth-child(3) a").click(function() {
$(".score-window").hide();
$(".register-window").show();
});
如果br
因任何原因必须留在那里,请使用p:nth-child(4)
或p:last-child
代替您的第二个选择器。
如果您正在使用或可以升级到jQuery 1.9,则可以使用:nth-of-type()
来将计数限制为仅p
元素(即第一个p
和第二个p
元素{1}}),但旧版本的jQuery不支持它:
$(".score-window p:nth-of-type(1) a").click(function() {
$(".score-window").hide();
$(".login-window").show();
});
$(".score-window p:nth-of-type(2) a").click(function() {
$(".score-window").hide();
$(".register-window").show();
});
答案 1 :(得分:0)
a
元素中没有score-window
元素(我的意思是score-window
的直接子元素)。实际上它在p
内。
答案 2 :(得分:0)
你需要的是
$(".score-window p:nth-child(2) a").click(function() {...});
因为a
是<p>
代码的子代,而不是<div class="score-window">
....
答案 3 :(得分:0)
使用:eq相反,a
元素是得分窗口的子元素,而不是直接元素,因此您的空间语法是正确的。只是:eq相反,因为a
元素是不是他们直接父母的第一个孩子(每个孩子都有一个文本节点),但它们首先在你匹配的集合中。在匹配时,不需要在中间指定p
元素。
$(".score-window a:eq(0)").click(function() {
$(".score-window").hide();
$(".login-window").show();
});
$(".score-window a:eq(1)").click(function() {
$(".score-window").hide();
$(".register-window").show();
});