在php foreach结果中循环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>