Schleife Javascript in einem php foreach führen

Question

ich ein Feedback in jedem Stern von Stern haben, wenn ich auf den Stern klicken in

Hier ist mein Code für jetzt:

Als ich Klicken Sie auf die erste Zeile, um den Titel des Sterns anzuzeigen. Nun ist die zweite Reihe, wenn ich es klicken, es zeigt nicht den Titel dieses Sterns ..

<table class="table table-striped table-hover"> 
    <thead> 
     <tr> 
      <th>&nbsp;</th> 
      <th>&nbsp;</th> 
      <th>Feedback</th> 
     </tr> 
    </thead> 

    <?php foreach($designation_show->result() as $r){?> 
    <tr> 
     <td> 
      <inut type = "hidden" name = "template_id" id = "template" value=<?php echo $r->t_id;?> /> 
      <?php echo $r->question_description;?> 
     </td> 
     <td> 
      <fieldset id='rate1' class="rating"> 
       <input class="stars" type="radio" id="star5" name="rating" value="5" /> 
       <label class = "full" for="star5" title="Outstanding - 5 stars"></label> 
       <input class="stars" type="radio" id="star4" name="rating" value="4" /> 
       <label class = "full" for="star4" title="Exceeds Expectation - 4 stars"></label> 
       <input class="stars" type="radio" id="star3" name="rating" value="3" /> 
       <label class = "full" for="star3" title="Meets Expectation - 3 stars"></label> 
       <input class="stars" type="radio" id="star2" name="rating" value="2" /> 
       <label class = "full" for="star2" title="Improvement Needed - 2 stars"></label> 
       <input class="stars" type="radio" id="star1" name="rating" value="1" /> 
       <label class = "full" for="star1" title="Failed - 1 star"></label> 
      </fieldset> 
     </td> 
     <td> 
      <div id='feedback'></div> 
     </td>    
    </tr> 
    <script> 
     $(document).ready(function() { 

      $("#rate1 .stars").click(function() { 

       var label = $("label[for='" + $(this).attr('id') + "']"); 

        $("#feedback").text(label.attr('title')); 
        $(this).attr("checked"); 

      }); 

     }); 
    </script> 
    <?php } ?> 
</table> 

Answer 1

1. Sie müssen die IDs ändern, einzigartig sein
2. nicht durchschleifen das Skript

Etwas wie folgt aus:

$(function() { 
 
    $(".rating .stars").on("click",function() { 
 
    var title = $(this).next().prop("title"); 
 
    $(this).closest("tr").find(".feedback").text(title); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="table table-striped table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th>&nbsp;</th> 
 
     <th>&nbsp;</th> 
 
     <th>Feedback</th> 
 
    </tr> 
 
    </thead> 
 
    <!-- loop this --> 
 

 
    <!-- iteration #1 --> 
 
    <tr> 
 
    <td> 
 
     <input type="hidden" name="template_id" id="rating1" value="..." /> 
 
     description 1 
 
    </td> 
 
    <td> 
 
     <fieldset class="rating"> 
 
     <input class="stars" type="radio" name="rating" value="5" /> 
 
     <label class="full" for="star5" title="Outstanding - 5 stars"></label> 
 
     <input class="stars" type="radio" name="rating" value="4" /> 
 
     <label class="full" for="star4" title="Exceeds Expectation - 4 stars"></label> 
 
     <input class="stars" type="radio" name="rating" value="3" /> 
 
     <label class="full" for="star3" title="Meets Expectation - 3 stars"></label> 
 
     <input class="stars" type="radio" name="rating" value="2" /> 
 
     <label class="full" for="star2" title="Improvement Needed - 2 stars"></label> 
 
     <input class="stars" type="radio" name="rating" value="1" /> 
 
     <label class="full" for="star1" title="Failed - 1 star"></label> 
 
     </fieldset> 
 
    </td> 
 
    <td class='feedback'></td> 
 
    </tr> 
 

 
    <!-- iteration #2 --> 
 

 
    <tr> 
 
    <td> 
 
     <input type="hidden" name="template_id" id="rating2" value="..." /> 
 
     description 2 
 
    </td> 
 
    <td> 
 
     <fieldset class="rating"> 
 
     <input class="stars" type="radio" name="rating" value="5" /> 
 
     <label class="full" for="star5" title="Outstanding - 5 stars"></label> 
 
     <input class="stars" type="radio" name="rating" value="4" /> 
 
     <label class="full" for="star4" title="Exceeds Expectation - 4 stars"></label> 
 
     <input class="stars" type="radio" name="rating" value="3" /> 
 
     <label class="full" for="star3" title="Meets Expectation - 3 stars"></label> 
 
     <input class="stars" type="radio" name="rating" value="2" /> 
 
     <label class="full" for="star2" title="Improvement Needed - 2 stars"></label> 
 
     <input class="stars" type="radio" name="rating" value="1" /> 
 
     <label class="full" for="star1" title="Failed - 1 star"></label> 
 
     </fieldset> 
 
    </td> 
 
    <td class='feedback'></td> 
 
    </tr> 
 

 
    <!-- end PHP loop --> 
 

 
</table>