3

特定の投稿を既に読んだことを読者に知らせる機能を構築しています。これを行うには、ユーザーに通知する必要があり、要素を .article に追加することでこれを行っています。私が抱えている問題は、.each ループ内に追加しているため、要素が 4 回追加されていることです。

私のコードは次のとおりです。

$('.article-container').each(function() {

    // CHECK IF THE DATA IS IN THE ARRAY    
    if(cookieValue.indexOf($(this).data('id')) != -1) {                     

        $(this).addClass('readit');                                         
        $('<h4 class="readit-alert">You&apos;ve read it!</h4>').appendTo('.article-container.readit');

    } else {

        // OTHERWISE, ADD CLASS NOT READ                
        $(this).addClass('notread');                                        

    }

});

そして、これが返されるものです：

<h4 class="readit-alert">You&apos;ve read it!</h4>
<h4 class="readit-alert">You&apos;ve read it!</h4>
<h4 class="readit-alert">You&apos;ve read it!</h4>
<h4 class="readit-alert">You&apos;ve read it!</h4>

「readit-alert」を article-container 内で 1 回だけ追加するにはどうすればよいでしょうか?

4

2 に答える 2

4

return false;ループの実行を停止する場合は、append の後に追加します。

var appended = false;それ以外の場合は、関数の外側にグローバルを配置し、true追加したらそれを設定します。

あれは：

var appended = false;

$('.article-container').each(function() {

    // CHECK IF THE DATA IS IN THE ARRAY    
    if(cookieValue.indexOf($(this).data('id')) != -1) {                     

        $(this).addClass('readit');   

        if (!appended){                                      
                $('<h4 class="readit-alert">You&apos;ve read it!</h4>').appendTo('.article-container.readit');
                appended = true;
        }
    } else {

        // OTHERWISE, ADD CLASS NOT READ                
        $(this).addClass('notread');                                        

    }

});
于 2012-06-11T22:42:58.280 に答える
0

上記のコードで遊んだ後、これが私が必要としていた方法で動作するようになった理由です。お役に立てれば。

var appended = false;

$('.article-container').each(function() {

    // CHECK IF THE DATA IS IN THE ARRAY    
    if(cookieValue.indexOf($(this).data('id')) != -1) {                     

        $(this).addClass('readit');   

        if (!appended){                                      
            $('<h4 class="readit-alert">You&apos;ve read it!</h4>').appendTo('.article-container.readit');
            appended = true;
        }

    } else {

        // OTHERWISE, ADD CLASS NOT READ                
        $(this).addClass('notread'); 
        appended = false;                    

    }

});
于 2012-06-11T23:05:59.760 に答える