Question

我有一个带有公共类的元素列表，并希望隐藏所有重复项。我能做到这一点。但是，我有一个“切换”链接，显示和隐藏元素列表。当切换发生时，我希望浏览器“重置”或“忘记”已标记为重复的内容，为用户再次单击过滤做好准备。

我的Fiddle显示过滤器正在运行，但我不想将#container的每个子DIV更改为可见元素，例如第19行正在执行 - 这是在我的代码之外发生的项目已经。要“忘记”我需要使用的东西，比如第18行的内容，尽管这似乎不起作用。

优选地，一旦元素被隐藏（第7行）就会发生“遗忘”，因此它准备再次出现在过滤器的未来实例中。什么是正确的语法？

编辑：为了更好地了解我的目标：

转到http://www.adaptworkbench.co.uk/
在左侧点击“证券”复选框。您将看到“TEST JOB”出现。取消选中此框。
在左侧单击“秘书”复选框。您将看到“TEST JOB”出现。取消选中此框。
再次点击“证券”。毕竟说完了“TEST JOB”就不会出现，但我希望浏览器“忘记”它被标记为“SEEN”并显示出来。

关键在于，如果选中两个复选框，则不会出现重复条目 - 如果勾选“证券”和“秘书”，您可以看到这是有效的，但是我希望它在隐藏后立即忘记复制，以便在之后单击一个复选框时再次出现“TEST JOB”。

希望这是有道理的！

Answer 1

一旦你选择了所有这些元素，你可以通过添加一个只有他们可以拥有的特殊类来隐藏它们，比如tempHidden或者其他什么。然后，一旦您准备再次显示它们，您就可以选择具有“特殊”类的所有项目：

$('.tempHidden').hide();

当你准备好再次展示时

$('.tempHidden').show();

每当您需要选择除隐藏项目以外的所有内容时，您可以使用.not()方法：

$('.everything').not('.tempHidden');

Answer 2

基于以下评论中的要求更新（最后一个被打破，这不是）：

基本上每个作业使用相同的id允许我们跟踪作业，并且我们可以为作业的检查类型分配多个类。可能有多个是这样做的，可能更多地取决于你实际显示它们的方式，但这很有效。

http://jsfiddle.net/EVDQa/6/

HTML：

<div id="input">
    <form>
        <input type="checkbox" name="jobs" value="security">Security
        <br>
        <input type="checkbox" name="jobs" value="secretarial">Secretarial
    </form>
</div>
<div id="display">
    <div class="posting hidden security" id="12345">
         This is a test Security job. Id: 12345
    </div>
    <div class="posting hidden secretarial" id="12345">
         This is a test Secretarial job. Id: 12345
    </div>
</div>

CSS：

.posting {
    border: 2px solid #000000;
}
.hidden {
    display: none;
    visibility: hidden;
}
#input {
    float: left;
}
#display {
    margin-left: 100px;
    float: left;
}

JS：

$("#input form input").change(function () {
    var jobType = $(this).val();
    var jobIds = [];
    var id;

    function getJobs() {
        $(".posting." + jobType).each(function () {
            id = $(this).attr("id");
            if ($.inArray(id, jobIds) === -1) {
                jobIds.push(id);
                $(this).toggleClass("hidden");

                if ($(this).hasClass("hidden")) {
                    jobIds = jQuery.grep(jobIds, function (value) {
                        return value != id;
                    });
                }
            }
        });
    }

    $(".posting:not(.hidden, ." + jobType + ")").each(function () {
        id = $(this).attr("id");
        if ($.inArray(id, jobIds) === -1) {
            jobIds.push(id);
        }
    });

    //Toggle jobs
    getJobs();
    jobType = $(":checked").val();
    getJobs();
});

jQuery：暂时删除重复元素

2 个答案: