0

我有以下 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，所以我不明白为什么这不起作用。

4

4 回答 4

2

您有两个链接，但每个链接都是其 parent 的唯一孩子p，因此它们只会匹配a:first-child。链接的父级不是.score-window，而是p。然而，元素的父级p（连同iandbr元素）是 .score-window.

您需要修改选择器以:nth-child()与p元素一起使用，然后选择a每个元素下的。有一个iwhich 是第一个孩子，而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元素（即 firstp和 second p），但旧版本的 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();
});
于 2013-02-15T13:01:19.107 回答
0

您没有a元素内score-window的元素（我的意思是 的直接子级score-window）。其实它在里面p。

于 2013-02-15T12:59:39.723 回答
0

你需要的是

$(".score-window p:nth-child(2) a").click(function() {...});

因为a是<p>标签的孩子而不是<div class="score-window">....

于 2013-02-15T13:02:10.893 回答
0

使用 :eq 代替，a元素是 score-window 的子元素，而不是直接元素，因此您的空间语法是正确的。只是 :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();
});
于 2013-02-15T13:21:51.403 回答