Использование jQuery-скрипта с циклом foreach в WordPress

Question

В настоящее время у меня есть этот сценарий:

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

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

, который работает, но я не уверен, как вывести его из цикла foreach, чтобы он не повторял jQueryсценарий снова и снова.

В целом, я пытаюсь получить значения из get_categories через WordPress, но затем передаю значение name из массива и проверяю его в jQuery для добавлениякласс для определенных элементов внутри div.

Я знаю, что, вероятно, иду по неправильному пути, поэтому я полностью открыт для предположения, если кто-нибудь знает лучший, более чистый способ приблизиться к этому.

Answer 1

Мне нравится максимально отделять PHP от JS и предотвращать многократные итерации.Поэтому я обрабатываю $names в PHP, а затем json_encode для JS-части для оценки.Код ниже (не проверено).

<?php
  $test = get_categories('taxonomy=item&type=things');

  foreach ($test as $stuff) {
    $names[] = $stuff->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>

Answer 2

Используйте array_column (), чтобы получить все имена.Не проверенный код ниже

<?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>