如何将 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 时，您应该允许这样做。

Answer 2

这需要一些script localization。在将脚本排入队列的位置，您可以执行以下操作：

global $post;
wp_localize_script( 'main-js', 'my_object', array( 'post_id' => $post->ID ) );

main-js 应该是您希望在其之前输出本地化脚本内容的脚本的名称。

然后在您的 javascript 文件中，您可以访问此对象及其 post_id 属性，并使用以下值执行您想要的操作：

var post_id = my_object.post_id;