“for循环”中的引导事件

Question

我有一个门户网站，可以读取 MYSQL 数据库并为找到的每个数据创建一行。 在这些行中的每一行中都有一个切换按钮，如果它被选中，它应该做一件事，如果不是，它应该做其他事情。

我有它的工作，但只适用于第一行。如何让它适用于所有行？

<tbody>
    <?php 
    if(count($userData)>0){
        $s  =   '';
        foreach($userData as $val){
            $s++;
    ?>
    <tr>
        <td class="text-center"><?php echo $s;?></td>
        <td class="text-center"><?php echo $val['rep_id'];?></td>
        <td class="text-center"><?php echo $val['rep_alias'];?></td>
        <td class="text-center"><?php echo $val['rep_email'];?></td>
        <td class="text-center"><?php echo $val['rep_phone'];?></td>
        <td class="text-center"><?php echo $val['rep_role'];?></td>
        <td>
            <?php $val['rep_role'];
                if($val['rep_role']!="DISABILITATO"){
                    ?>
                    <div class="checkbox text-center">
                        <input type="checkbox" name="inServizio" id="inServizio" data-toggle="toggle" data-on="SI" data-off="NO" data-onstyle="success" data-offstyle="danger">
                    </div>
                    <div id="console-event"></div>
                    <!--<input type="hidden" name="hidden_inServizio" id="hidden_inServizio" value="NO" />-->
            </td>
            <?php 
                }?>
        <td align="center"><?php echo date('d-m-Y',strtotime($val['dt']));?></td>
        <td align="center">
            <a href="edit_rep.php?editId=<?php echo $val['id'];?>" class="text-primary"><i class="fa fa-fw fa-edit"></i> Modifica</a> | 
            <a href="delete_rep.php?delId=<?php echo $val['id'];?>" class="text-danger" onClick="return confirm('Sei sicuro di vole cancellare il Negozio?');"><i class="fa fa-fw fa-trash"></i> Elimina</a>
        </td>

    </tr>

    <?php 
        }
    }else{
    ?>
    <tr>
        <td class="text-center col-md-auto">Nessun Dato trovato!!</td>
        <td class="text-center col-md-auto">Nessun Dato trovato!!</td>
        <td class="text-center col-md-auto">Nessun Dato trovato!!</td>
        <td class="text-center col-md-auto">Nessun Dato trovato!!</td>
        <td class="text-center col-md-auto">Nessun Dato trovato!!</td>
        <td class="text-center col-md-auto">Nessun Dato trovato!!</td>
    </tr>
    <?php } ?>
</tbody>     


$(function() {
    $('#inServizio').change(function() {
        if($(this).prop('checked')){
            $('#console-event').html('Stato: ON' );
        } else {
            $('#console-event').html('Stato: OFF ');
        }
        $(this).prop('checked')
    })
}); ```

Answer 1

您正在使用 id "inServizio" 来放置一个监听器。但是这个 id 只影响 DOM 中的一个元素（在第一个元素中），因为使用 id 我们只是在所有文档中标识一个。

这里有很多解决方案：

1. 在元素中 (HTML)：

<input type="checkbox" name="inServizio" class="inServizio" data-toggle="toggle" data-on="SI" data-off="NO" data-onstyle="success" data-offstyle="danger">

1. Javascript

$('.inServizio').change(function() {
    if($(this).prop('checked')){
       $(this).parent().siblings().html('Stato: ON' );
    } else {
       $(this).parent().siblings().html('Stato: OFF ');
    }
    ...