javascript - 如何将 WordPress 帖子 ID 传递到 HTML5 本地存储

Question

我有一个 WordPress 网站，其中列出了同位素布局中的自定义帖子类型项目。每个项目都有一个最喜欢的按钮。一旦您喜欢它，星星就会通过 CSS 突出显示。当您转到该项目时，我希望能够看到该项目已被收藏。

我刚刚意识到我的脚本不存储该按钮的 ID，因此它不会在单个页面上显示它，而只是在收藏它的页面上显示。这是脚本:

  if (typeof(localStorage) == 'undefined') {
    document.getElementById("result").innerHTML =
      'Your browser does not support HTML5 localStorage. Try upgrading.';
  } else {
      $(".grid-item").each(function(i, el) {
        if (localStorage['fav' + i] == 'addfave') {
          $(this).addClass('addfave');
        }
      });
  }

  $(document).ready( function() {

    // ADD FAVE


    $( ".fav" ).click(function(e) {

      e.preventDefault();

      var $item = $(this).closest('.grid-item');
      var index = $('.grid-item').index($item);

      //localStorage.removeItem('background');
      $item.toggleClass('addfave');

      if ($item.hasClass('addfave')) {
        console.log(index)
        localStorage.setItem('fav' + index, 'addfave');
      } else {
        localStorage.removeItem('fav' + index);

        if (localStorage['fav' + i] == null) {
        }
      }
    });
  });

我的按钮看起来像这样，我使用 CSS 在 span 标记中显示星号

<a href="#" id="fav<?php echo $post->ID; ?>" class="fav" title="[+] Add as favorite"><span></span></a>

Answer 1

您的链接 ID 中已经有一个帖子 ID，因此无需重做，您只需将使用索引号识别网格项更改为使用帖子 ID。

if (typeof(localStorage) == 'undefined') {
    document.getElementById("result").innerHTML =
      'Your browser does not support HTML5 localStorage. Try upgrading.';
  } else {
    console.log(localStorage);

      $(".fav").each(function(i, el) {
        if (localStorage[el.id] == 'addfave') {
          $(this).closest('.grid-item').addClass('addfave');
        }
      });
  }

  $(document).ready( function() {

    // ADD FAVE


    $( ".fav" ).click(function(e) {

      e.preventDefault();

      var $item = $(this).closest('.grid-item');
      var index = this.id;

      //localStorage.removeItem('background');
      $item.toggleClass('addfave');

      if ($item.hasClass('addfave')) {
        localStorage.setItem( index, 'addfave');
      } else {
        localStorage.removeItem(index); 
      }
    });
  });

为了演示，请看下面的 jsfiddle，它不是很令人兴奋，但在收藏时它会变成红色，您可以添加更多网格项目并更改顺序，它会收藏正确的项目。

https://jsfiddle.net/a71b4zd8/6/

现在我不知道单页的意思，但我假设在单页模板上。上面的功能不适合在该页面上标记收藏夹。我不知道您的 html 结构，但用于唯一标识页面的典型 id 可能是 post-{$postif}

您应该在创建脚本来检查帖子 ID 时考虑到这一点。