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

【问题标题】：js-cookie, add class if different cookie is setjs-cookie，如果设置了不同的cookie，则添加类
【发布时间】：2016-12-27 09:18:15
【问题描述】：

如果设置了带有某些 ID 的 cookie，我正在尝试找到如何将类添加到 div 的方法。使用https://github.com/js-cookie/js-cookie。当我们单击带有“bar-info”类的按钮时，就会设置 Cookie。但我不知道如何读取 cookie (Cookies.get)，当文档准备好时，将类（隐藏）添加到 div，其 ID 与我们设置为 cookie 的 ID 相同。有人可以帮我吗？

$('[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>
	<div class="message-info">
		<p class="content">
			<a href="#">Lorem ipsum dolor sit amet.</a>
		</p>
		<a href="#" class="btn-close" data-dismiss="bar-info"><span>Close</span></a>
	</div>
</div>

【问题讨论】：

标签： javascript jquery html cookies

【解决方案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});
});

【讨论】：