javascript - 如何在一页中使用具有相同 id 的重复元素的 JavaScript？

Question

我正在构建一个 wordpress 网站，我在其中一个页面中遇到了 JavaScript 实现的问题。

我在我的网站上使用一个插件来实现问答功能。我想为这个页面中的每个用户回答添加一个星级。我在 HTML 和 JavaScript 中添加了一个 div，以根据从数据库中获取的用户星级值更改此 div 以显示星级。

我遇到的问题是:在我将代码(div 和 JavaScript)添加到此插件 PHP 文件(显示问题答案插件的答案)后，只有第一个用户的答案星级值发生了变化。其余星标显示全 5 星。

如何处理同一页面中具有相同id的重复元素？

这是插件 php 文件的一部分(显示问题答案插件的答案)

<div id="post-<?php the_ID(); ?>" <?php post_class() ?> ap-id="<?php 
the_ID(); ?>" ap="answer">
<div class="ap-content" itemprop="suggestedAnswer<?php echo ap_is_selected() 
? ' acceptedAnswer' : ''; ?>" itemscope 
itemtype="https://schema.org/Answer">
<div class="ap-single-vote"><?php ap_vote_btn(); ?></div>
<div class="ap-avatar"> 
<a href="<?php ap_profile_link(); ?>"<?php ap_hover_card_attr(); ?>>
<?php ap_author_avatar( ap_opt( 'avatar_size_qanswer' ) ); ?>
</a>
</div>
<div class="ap-cell clearfix">
<div class="ap-cell-inner">
<div class="ap-q-metas">
<?php echo ap_user_display_name( [ 'html' => true ] ); ?>
<a href="<?php the_permalink(); ?>" class="ap-posted">
<time itemprop="datePublished" datetime="<?php echo ap_get_time( 
get_the_ID(), 'c' ); ?>">
<?php printf( 'Posted %s', ap_human_time( ap_get_time( get_the_ID(), 'U' ) ) 
 ); ?>
</time>
 </a>
 <?php ap_recent_post_activity(); ?>
 <?php echo ap_post_status_badge( ); // xss okay.   ?>
  </div>

  <div class="ap-q-inner">
  <?php  //star rating data fetch from database.
   $_postx = ap_get_post();
   $curru_ID=$_postx->post_author;
   $answertitle=get_the_title();


   $con=mysqli_connect("localhost","root","","sitedata");
   $ratevalue1=mysqli_query($con,"select rating from ratings where 
   Name='$answertitle' AND postID='$curru_ID'");
   $ratevaluearr1 = mysqli_fetch_array($ratevalue1);
   $ratingonequery=$ratevaluearr1[rating];
   $ratenamevalue1=mysqli_query($con,"select ratingname from ratings where 
   Name='$answertitle' AND postID='$curru_ID'");
   $ratenamevaluearr1 = mysqli_fetch_array($ratenamevalue1);
   $ratingnameonequery=$ratenamevaluearr1[ratingname];
    ?>
    <?php 
    do_action( 'ap_before_answer_content' );
    ?>
    <div class="ap-answer-content ap-q-content" itemprop="text" ap-content>
    <?php the_content(); ?>
    </div>
    <?php
    do_action( 'ap_after_answer_content' );
    ?>

    </div>

    <div id="rate1" class="rating"></div>   
    <?php if ( ap_user_can_read_answer( ) ) : ?>
    <div class="ap-post-footer clearfix">
    <?php echo ap_select_answer_btn_html( ); // xss okay ?>
    <?php ap_post_actions_buttons() ?>
    <?php echo ap_comment_btn_html(); // xss okay. ?>
    </div>
    <?php endif; ?>
    </div>
    <?php ap_the_comments(); ?>
    </div>
    </div>
    </div>
    <script>
    var cw = window.rate1.clientWidth; // save original 100% pixel width
    var userstarvalue = "<?php echo $ratingonequery ?>";
    rating(userstarvalue);
    function rating( stars ) {
    var ratingfill=stars;
       var rating_integer=Math.floor(ratingfill);
       var rating_decimal=ratingfill%1;
       var rating_dec_trimmed=rating_decimal.toFixed(1);  
       if((rating_dec_trimmed==0.1)||(rating_dec_trimmed==0.2)||
          (rating_dec_trimmed==0.3)||(rating_dec_trimmed==0.4))
       {
             window.rate1.style.width = ((40*rating_integer)+18) + 'px';
       }
       if((rating_dec_trimmed==0.6)||(rating_dec_trimmed==0.7)||
          (rating_dec_trimmed==0.8)||(rating_dec_trimmed==0.9))
       {
             window.rate1.style.width = ((40*rating_integer)+28) + 'px';
       }
       if(rating_dec_trimmed==0.5)
       {
             window.rate1.style.width = ((40*rating_integer)+20) + 'px';
       }
       if(rating_dec_trimmed==0)
       {
             window.rate1.style.width = (40*rating_integer) + 'px';
       }
  } 
   </script>    
   <style>
   .rating {
   font-size: 48px;
   color: #0095f9;
   display: inline-block;
   overflow: hidden;
      }
.rating::before { 
   content: "\2605\2605\2605\2605\2605" 
}
   </style>

Answer 1

首先，多个元素不应具有相同的id，而应具有相同的class。它不会引发错误，但不是惯例。

您可以使用 jQuery 和 each 功能来遍历所有具有相同 ID 或类的实例。

$('.rating').each(function(index, object) {
    //logic here
});

'index' 是数组中的位置，'object' 是 DOM 对象(具有类 rating)。