使用 json_encode 和 PHP 使用 jQuery 在另一个 div 中添加一个类答案

【问题标题】：Using json_encode with PHP to add a class in another div with jQuery使用 json_encode 和 PHP 使用 jQuery 在另一个 div 中添加一个类
【发布时间】：2018-10-19 21:25:41
【问题描述】：

我正在使用 WordPress 将 get_categories 放入一个变量中，然后尝试从 get_categories 数组中获取类别名称，然后将其传递给一个 jQuery 变量，让它检查 jQuery 中的另一个条件。

到目前为止，我能够正确地从 get_categories 获取数据，然后使用 json_encode 将该数组解析为 json 格式。

但我要挂断的是我只想要来自 WordPress 的 get_categories 数组的 name，然后将其传递给 jQuery 以运行条件。

我不确定正确格式化该格式的正确方法，以便 jQuery 可以解释它而不会对此感到胡思乱想。

这是我目前所拥有的：

代码：

  <?php $test = get_categories('taxonomy=stuff&type=item'); ?>
            <script type="text/javascript">
            jQuery(document).ready(function($) {
              var $things = <?php echo json_encode($test); ?>
              $(".this-div").each(function() {
                var $item = $(this).attr("title");
                if ($things.indexOf($item) > -1) {
                  $(this).addClass('current');
                }
              });
            });
            </script>

我已经尝试过$test[0]->name，但这只会返回其中一个值，而不是全部。所以，我不确定我是否正确地解决了这个问题，或者是否有更好的方法。

【问题讨论】：

不确定 php 是否有内置的 map 函数，但从概念上讲，您将遍历 $test 元素并从所有名称构建另一个数组，这就是您要回显到 $things
是的，我也尝试了foreach 循环，但这产生了一些奇怪的结果。再加上所有的努力都让我走上了json_encode 的道路，看起来它应该可以工作，但我觉得我错过了一些东西......
您将需要 json_encode 最后的结果数组将其转换为 javascript 能够解析为存储在 $things 中的数组的结构，但您必须创建名称数组你先给它。
否则你可能会这样离开它，然后你的if() 条件将更改为可能类似于if ($things.find(function(element){ return element.name === $item; })) Ref。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
那是我不确定的另一件事，我将把foreach 循环按操作顺序放在哪里，以便将这些名称存储到一个变量中，以便用 jQuery 提取。

标签： javascript php jquery arrays json

【解决方案1】：

不能说我使用 word press，但如果 get_categories() 只返回一个 JSON 字符串，你可以这样做：

<p class="categories"><?php echo get_categories('taxonomy=stuff&type=item')></p>
<script>
    let categories = JSON.parse($('.categories').text());
    $(".this-div").each(function() {
      let $div = $(this);
      if (categories.includes($div.attr("title")) {
        $div.addClass('current');
      }
  });
</script>

php 中的hp 部分表示Hypertext Preprocessor，因为它预处理超文本。它在脚本中不起作用。但是，您可以使用它将数据写入超文本中的元素，然后从脚本中访问它。只要您将超文本放在文档中的脚本之前，您就不必等待整个文档加载。 ~~$(document).ready()~~

另外，如果您要多次使用$(this)，建议您将其保存为变量以保存多余的jquery 函数调用。如果您将其命名为比 $this 更具描述性的名称，我发现未来的自我会很感激。

哦，是的，还有.includes()。这是.index() > -1 的一种更简洁的表达方式。

【讨论】：

谢谢！是的，get_categories 不会以 json 的形式返回，所以这就是它需要以某种方式编码或解析的原因。但这确实有助于整理其中的 jQuery 部分。

【解决方案2】：

想通了这个：

<?php 
$test = get_categories('taxonomy=item&type=things');
$names = array_column($test, 'name'); ?>

<script type="text/javascript">
jQuery(document).ready(function($) {
  var $things = <?php echo json_encode($names); ?>;
  console.log($things);
  $(".element").each(function() {
    var $state = $(this).attr("title");
    if ($things.indexOf($state) > -1) {
      $(this).addClass('current');
    }
  });
});
</script>

从这里：Using jQuery script with WordPress foreach loop

【讨论】：