js-cookie、異なるクッキーが設定されている場合にクラスを追加します。

Question

IDを持つクッキーが設定されている場合、どのようにクラスをdivに追加するかを見つけようとしています。 https://github.com/js-cookie/js-cookieを使用してください。 Cookieは、「bar-info」クラスのButtonをクリックすると設定されます。しかし、クッキーの読み方（Cookies.get）とドキュメントの準備ができているかどうかは、クッキーに設定したのと同じIDのIDを持つdivにクラス（隠し）を追加することはできません。誰か助けてくれますか？

$('[different-id-bar]').each(function() { 
 
    var $bar = $(this); 
 
    var button = $bar.find('[data-dismiss="bar-info"]'); 
 
    //var getCookieIdName = $(document).data('cookie-id'); 
 
    var getCookieId = $(this).attr('data-cookie-id'); 
 
    var cookieName = 'data-cookie-bar-' + $(this).attr('data-cookie-id'); 
 
    //var $cookie = Cookies.get(cookieName, getCookieId); 
 

 
    //if ($cookie) { 
 
    //$bar.addClass('hidden'); 
 
    //} 
 

 
    button.on('click', function() { 
 
    Cookies.set(cookieName, getCookieId, {expires: 300}); 
 
    $bar.addClass('hidden'); 
 
    }); 
 

 
    //$(document).ready(function(){ 
 
    //if (Cookies.get(cookieName, getCookieId)) { 
 
     //$bar.addClass('hidden'); 
 
    //} 
 
    //}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="js-cookie-plugin-local-destination"></script> 
 
<div class="row row-main" data-cookie-id="2585646" different-id-bar> 
 
\t <div class="message-info"> 
 
\t \t <p class="content"> 
 
\t \t \t <a href="#">Lorem ipsum dolor sit amet.</a> 
 
\t \t </p> 
 
\t \t <a href="#" class="btn-close" data-dismiss="bar-info"><span>Close</span></a> 
 
\t </div> 
 
</div>

Answer 1

あなたは所望のデータを取得するためにDOMの関係を使用することができます。ここで.closest()は、different-id-bar要素まで移動するために使用できます。

//iterate each element and read cookie 
$('[data-dismiss="bar-info"]').each(function(){ 
    //Travese up to parent element 
    var $bar = $(this).closest('[different-id-bar]'); 
    //Get the cookie id 
    var getCookieId = $bar.attr('data-cookie-id'); 

    //Create cookie name 
    var cookieName = 'data-cookie-bar-' + getCookieId; 

    //Read cookie 
    var cookie = Cookies.get(cookieName); 

    //if cookie is defined and has value add css class 
    if(cookie !== undefined && cookie === getCookieId){ 
     $bar.addClass('hidden'); 
    } 
}); 


//Bind the click handler 
$('[data-dismiss="bar-info"]').on('click', function(){ 
    //Travese up to parent element 
    var $bar = $(this).closest('[different-id-bar]'); 
    //Get the cookie id 
    var getCookieId = $bar.attr('data-cookie-id'); 

    //Create cookie name 
    var cookieName = 'data-cookie-bar-' + getCookieId; 

    $bar.addClass('hidden'); 

    Cookies.set(cookieName, getCookieId, {expires: 300}); 
});