Question

第一次我的HTML，CSS看起来很完美，但如fiddle所示，当点击按钮时，我想隐藏/显示一些.show元素。当我隐藏它们时，CSS就会被破坏。我不知道我错过了什么。

HTML：

<div>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
    <span class="show">box</span>
</div>
<input type="button" id="button" value="click" />

CSS：

div .show:nth-of-type(-n+4) {
    margin-top:0;
}
div .show:nth-of-type(4n) {
    margin-right:0;
}

JS：

$("#button").click(function () {
    $("span:eq(0),span:eq(2)").toggle().toggleClass("show");
});

Jsfiddle here.

任何帮助都将不胜感激。

感谢您的时间。

Answer 1

:nth-of-type不会只计算.show元素，它会计算所有 spans。因此，当你隐藏其中一些时，即使它们被隐藏了，它们仍然会被计算在内。

如果您要显示和隐藏跨度，nth-of-type可能不是您需要的。

我不是CSS向导。有两种选择：

不要隐藏元素detach，然后再重新附加它们。然后他们不再在父母身上，:nth-of-type将继续工作。请参阅下面的示例。
（我不喜欢这个，但是......）不要使用:nth-of-type，每当你显示/隐藏跨度时使用你通过JavaScript分配的类（基本上是通过可见的和给他们上课以做你需要的。）

以下是执行分离/重新连接的示例：Fiddle

// Get the spans
var $spans = $("#container span");

// Assign them indexes
$spans.each(function(index) {
    this.setAttribute("data-index", index);
});

// Attach/detach on a toggle
var detached;

$("#button").click(function () {
    if (detached) {
        reattach(detached);
        detached = undefined;
    }
    else {
        detached = detach();
    }
});

function detach() {
    var rnd1, rnd2;

    // Pick two at random
    rnd1 = Math.floor(Math.random() * $spans.length);
    do {
        rnd2 = Math.floor(Math.random() * $spans.length);
    }
    while (rnd2 === rnd1);

    // Detach them
    return $("#container span:eq(" + rnd1 + "),span:eq(" + rnd2 + ")").detach();
}

function reattach(spans) {
    spans.each(function() {
        var $span = $(this),
            index = +$span.attr("data-index");
        if (index === 0) {
            $span.prependTo("#container");
        }
        else {
            $span.insertAfter($spans[index - 1]);
        }
    });
}

请注意，包含跨度而不是的div有一个空文本节点作为其第一个孩子（您的小提琴，我已将其删除）很重要。那是因为当我们把跨度放回去时，因为我们总是按顺序执行它们，如果我们重新连接第一个，我们必须使用prependTo而不是insertAfter，并且文本节点会混乱。

伪类nth-of-type不适用于特定类

1 个答案: