0

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

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

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

编辑：为了更好地了解我所追求的：

  1. 访问http://www.adaptworkbench.co.uk/

  2. 在左侧单击“证券”复选框。您将看到“测试作业”出现。取消选中该框。

  3. 在左侧单击“秘书”复选框。您将看到“测试作业”出现。取消选中该框。

  4. 再次点击“证券”。毕竟，“TEST JOB”不会出现，但我希望浏览器“忘记”它被标记为“SEEN”并显示它。

这样做的目的是，如果选中两个复选框，则不会出现重复条目​​ - 如果您同时勾选“证券”和“秘书”，您可以看到这是有效的，但我希望它在隐藏重复项后立即忘记，以便之后单击一个复选框时，“测试作业”将再次出现。

希望这是有道理的！

4

2 回答 2

1

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

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

当你准备好再次展示它们时

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

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

$('.everything').not('.tempHidden');
于 2013-02-27T16:42:02.197 回答
0

根据以下评论中的要求更新（最后一个坏了，这不是）：

基本上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();
});
于 2013-02-27T17:12:27.197 回答