0

初めてここで質問するときは、皆さんがこれまでと同じように役立つことを願っています。

私はこれを行うことになっているJavascriptで（いくつかのjQueryも使用して）スクリプトを作成しています：ユーザーの投稿があるページがあるとします。誰かがユーザーの名前をクリックすると、投稿の1つで、スクリプトは同じユーザーの他のすべての投稿を強調表示します。ユーザーの投稿がすでに強調表示されていて、別の投稿で別のユーザーの名前をクリックした場合、以前に強調表示されたすべての投稿を通常の状態に戻す必要があり、代わりに他のユーザーの投稿を強調表示する必要があります。

私が書いたスクリプトはこれです。 

$(function (){
    $(".showall").click(function() {
        var identifier = this.innerHTML;

        var already = document.getElementsByClassName("highlight");
        var l = already.length;

        if (l) {            
            for (i=0; i<l; i++) {
                var to_hide = already[i].id;
                $("#"+to_hide).toggleClass("highlight");
            }
        }

        var sum = document.getElementsByClassName("uid_"+identifier)
        var l = sum.length;
        for (i=0; i<l; i++) {
            var to_show = sum[i].parentNode.parentNode.parentNode.id;
            $("#"+to_show).toggleClass("highlight");
        }

    });

});

それが何をするのか少し説明させてください。

指定された要素の1つでクリックイベントがトリガーされると、ユーザーIDが格納され、ドキュメントの「ハイライト」クラスをチェックして、すでにハイライトされたコメントがあるかどうかがチェックされます。

ハイライトされたコメントがある場合は、それらのすべてからハイライトクラスを削除し、ユーザー識別子に基づいて、それに応じて他の投稿をハイライトすることが想定されています。

スクリプトの問題は、if（l）{}条件付きのループ内で発生します。

if (l) {            
    for (i=0; i<l; i++) {
        var to_hide = already[i].id;            
        $("#"+to_hide).toggleClass("highlight");
    }
}

ハイライトクラスを削除する場合、1つおきの投稿をスキップして削除し、半分の長さのループのみを実行します。

たとえば、ユーザーの投稿を強調表示したとします。そのユーザーには14件の投稿があったため、14件すべてが強調表示されます。ここで、別のユーザーの投稿を強調表示して、そのユーザーの名前をクリックすると、スクリプトは次のように以前の投稿から強調表示を削除します。

投稿No1から
ハイライトを 削除する投稿No3からハイ ライトを削除する
投稿No5からハイライトを削除する投稿No7からハイライトを削除する投稿No9からハイライトを削除する投稿No11から ハイライトを削除する投稿No13から ハイライトを削除する




別のユーザー名をもう一度クリックすると
、投稿No2からハイライトを削除します
。投稿No6からハイライトを削除
します。投稿No10からハイライトを
削除します。投稿No14からハイライトを削除します。

等

ループがそのように動作する理由がわかりません。.toggleClassを使用して行を削除し、配列のすべての要素に対してアラートが発生するようにしました。要素をスキップせずに、半分の長さではなく、全長に対してアラートを送信しました。

.toggleClassを使用すると、iが2ずつ増加するようなもので、私は私の愛のために、その理由を理解できません。また、jQueryを使用せずに.classList.toggleを使用してこれを実行しようとしましたが、これも同じです。

どんな助けでも大歓迎です。よろしくお願いします。

編集：追加するのを忘れました、スクリプトがスキップしている投稿に対して、Chromeのコンソールがこのエラーを表示します：Uncaught TypeError：undefinedのプロパティ'id'を読み取ることができません。それが何を意味するのかは理解しています。idプロパティを読み取るための有効なオブジェクトが見つからなかったようですが、なぜそれが発生するのかわかりません。

4

1 に答える 1

1

コードが複雑すぎるようです。

このようなものはあなたのユースケースで機能しますか？

$('.user-name').click(function (e) {
    e.preventDefault();
    var user_id = $(this).parent().data('userid');

    if (!$(this).parent().hasClass('selected')) {    
        $('.post.selected').removeClass('selected');
        $('.post[data-userId='+ user_id +']').addClass('selected');
    } else {
        $('.post.selected').removeClass('selected');
    }
});
于 2012-09-15T04:40:49.820 に答える