Question

我有一个wordpress网站，我的索引页面将显示帖子标题，缩略图，并列出所有可用的帖子类别。帖子的每个实例也会显示所有可用的帖子类别。对于帖子所具有的每个类别，应使用浅蓝色背景颜色突出显示类别名称。目前，背景颜色功能仅适用于第一个帖子，而不适用于其他三个帖子。

下面的代码旨在将每个帖子的类别推送到一个数组中，并在数组中搜索给定的类别（下面的代码只是为了简洁起见，只搜索其中一个类别）。如果找到了类别，jQuery脚本应该突出显示类别名称，但正如我上面所说，它仅适用于第一篇文章。

谁能看到我做错了什么？提前致谢。

<section class="blog-index">
<?php 
$args = array('showposts' => 3);
$recent = new WP_Query( $args );

if( $recent->have_posts() ): 
    echo '<div class="blog-index-list">';

while ( $recent->have_posts()) :
    $recent->the_post(); 
    $categories = get_the_category();
    $cats = array();                                            
    foreach($categories as $category) {                             
        $cats[] = $category->name;
    }
    if(in_array("Academia", $cats)) {

        echo "<script type='text/javascript'>
              jQuery('#A').addClass('active');
              jQuery('#A').css({'background-color': #009edb', 'color': '#ffffff'});
              </script>";
    }

    echo '<article> 
              <h2><hr class="orange-line above-left">   <a href="'.get_the_permalink().'">
              <span class="dark-blue">' .get_field('dark_blue_hero'). '</span><br/>
              <span class="light-blue">' .get_field('light_blue_hero') . '</span></a>
              </h2>
          <ul class="all-categories">
                  <li id="G">G</li>
                  <li id="A">A</li>
                  <li id="I">I</li>
                  <li id="N">N</li>
          </ul>
          <img src="'.get_the_post_thumbnail().'' .
          '<div class="blog-index-button et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center">
             <a class="et_pb_button  et_pb_button_3 et_pb_module et_pb_bg_layout_light" href="' . get_the_permalink() . '">READ POST</a>
           </div>                   
          </article>';
endwhile; 
echo '</div>';
endif; 
wp_reset_query(); 
?>

Answer 1

ID应该是唯一的（如Barmar所述），但仍然可以使多个元素具有相同的ID。并且可以使用jQuery选择它们。这就是为什么我还要解释如何用类来完成它。

当您使用jQuery ID选择器（jQuery("#id")）时，它会选择具有给定ID id的第一个元素。

要选择ID为id的所有元素，您可以按其属性选择它们：

jQuery("li[id=id]")

由于ID应该是唯一的，因此最好使用类。使用jQuery类选择器jQuery(".class")，您可以选择类class的所有元素。您应该将li元素更改为具有类而不是ID，并使用jQuery选择这些类。

我的foreach仅适用于第一个实例

1 个答案: