在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>