0

共通のクラスを持つ要素のリストがあり、すべての重複を非表示にしたい。私はこれを達成することができます。ただし、要素のリストを表示および非表示にする「トグル」リンクがあります。トグルが発生したときに、重複としてマークされたものをブラウザに「リセット」または「忘れ」て、ユーザーがフィルタをもう一度クリックできるようにします。

私のフィドル#containerはフィルターが機能していることを示していますが、たとえば19行目が行っているように、のすべての子DIVを表示要素に変更したくありません-これは私のプロジェクトのこのコードの外ですでに発生しています。要素を「忘れる」には、18行目にあるようなものを使用する必要がありますが、これは機能していないようです。

できれば、要素が非表示になるとすぐに「忘却」が発生するため（7行目）、フィルターの将来のインスタンスで再び表示される準備ができています。正しい構文は何でしょうか？

編集：私が何を求めているかについてのより良いアイデアのために：

  1. http://www.adaptworkbench.co.uk/にアクセスします

  2. 左側にある[セキュリティ]チェックボックスをクリックします。「TESTJOB」が表示されます。チェックボックスをオフにします。

  3. 左側にある[秘書]チェックボックスをクリックします。「TESTJOB」が表示されます。チェックボックスをオフにします。

  4. もう一度「セキュリティ」をクリックします。結局のところ、「TEST JOB」は表示されませんが、ブラウザに「SEEN」とマークされたものを「忘れて」表示してもらいたいのです。

これのポイントは、2つのチェックボックスがオンになっている場合に重複エントリが表示されないようにすることです。「セキュリティ」と「秘書」の両方にチェックマークを付けると、これが機能していることがわかりますが、重複を非表示にした直後に忘れて、その後、チェックボックスを1つクリックすると、「TESTJOB」が再度表示されます。

これが理にかなっていることを願っています！

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 に答える