循环的javascript导致

Question

我希望有排名的每颗恒星的反馈，当我在

这里点击星星是我的代码现在：

当我点击第一行显示该明星的标题。现在，第二行，当我点击它，它并不表明星的冠军。

<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. 你需要改变的ID是唯一的
2. 不循环脚本

事情是这样的：

$(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>