我的 foreach 仅适用于第一个实例 [重复]

Posted 2023-05-07

【中文标题】我的 foreach 仅适用于第一个实例 [重复]

【英文标题】：My foreach is only applying to the first instance [duplicate]

【发布时间】：2017-08-12 03:09:01

【问题描述】：

我有一个 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(); 
?>  

【问题讨论】：

因为您只将javascript应用于带有id=A的li，即使其他类别在$cats数组中，它们也不会因为您的javascript代码而突出显示。

为了简洁起见，代码只搜索其中一个类别。我的两个帖子被归类为“学术界”，但只有第一个帖子突出显示。这就是问题所在。

ID 应该是唯一的。你不应该在每篇文章中重复id="A"。如果需要重复，请使用课程。

你的 img 标签坏了，它永远不会结束。

【参考方案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 选择这些类。

【讨论】：

ID 应该是唯一的。

@Barmar 你是对的，但如果有人决定使用重复的 ID，这将起作用。

也许吧，但最好向他们展示如何正确使用课程。

@TomUdding 现在我的 jQuery 看起来像这样：if(in_array("Academia", $cats)) echo "<script type='text/javascript'> jQuery('li[id=A]').addClass('active'); jQuery('li[id=A]').css('background-color': '#009edb', 'color': '#ffffff'); </script>"; 仍然无法正常工作，您的意思是这样吗？

@AFarkas 我敢打赌，问题与您的 jQuery 无关，而是与您的 jQuery 和 PHP 的散布有关。可能是当 jQuery 运行时，带有“A”id 的 html 甚至不在页面上。我的建议是将所有这些 jQuery 代码放入页面底部包含的 js 文件中，然后有条件地应用它。