如何在一頁中使用具有相同ID的重複元素的JavaScript？

Question

我正在構建一個wordpress網站，並且在其中一個頁面中遇到了JavaScript實現問題。

我在我的網站中使用插件來提問和回答功能。我想爲此頁面中的每個用戶答案添加星級評分。我在HTML和JavaScript中添加了一個div，以根據從數據庫中提取的用戶明星值將此div更改爲顯示星星。

我遇到的問題是：在將代碼（div和JavaScript）添加到此插件PHP文件（顯示問題答案插件的答案）後，僅更改了第一個用戶的答案星級值。星級展示的其餘部分顯示全部5星。

我該如何處理同一頁面中具有相同ID的重複元素？

這裏是所有的多元素

<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插件的PHP文件（該文件顯示爲解答問題答案的插件）的一部分。它不會拋出一個錯誤，但不是一個約定。

您可以使用jQuery和each功能遍歷具有相同id或class的所有匹配項。

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

「索引」是陣列中的現在的位置，「對象」是DOM對象（與類rating）。