js-cookie，添加类如果设置了不同的cookie

Question

我试图找到如何添加类到div如何设置cookie的方式。使用https://github.com/js-cookie/js-cookie。当我们点击带有“bar-info”类的按钮时Cookie被设置。但我不知道如何读取cookie（Cookies.get），并且当文档准备就绪时，将类（隐藏）添加到具有与我们设置为cookie的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}); 
});