Question

我有类别列表，每个类别都有引导开关，使类别处于活动/非活动状态。我有如下所示的wriitten代码，但是获得点击哪个开关的问题。

 <tbody>
  <?php while($r=$q->fetch_assoc()){?>
   <tr class=" gradeX">
     <td><?php echo $r['category_id']; ?></td>
     <td><?php echo $r['category_name']; ?></td>
     <td><?php echo $r['category_desc']; ?></td>
     <td class="center"><?php echo $r['sortorder']; ?></td>
     <td class="center"><?php if($r['status']==1){echo "Active";} else {echo "Inactive";} ?></td>
     <td><input type="checkbox" name="status" id="<?php echo "status".$r['category_id'];?>" checked data-on-color="success" data-off-color="danger" data-size="mini"></td>
   </tr>
  <?php }?>
 </tbody>

<script src="js/switch/bootstrap-switch.js"></script>
$("[name='status']").bootstrapSwitch();
$('#status1(Here i want id of switch or checkbox which is clicked)').on('switchChange', function (e, data) {
var $element = $(data.el),
value = data.value;
alert(value);
});

这是我的HTML代码。

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
            <thead>
              <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Description</th>
                <th>Sort Order</th>
                <th>Status</th>
                <th>Active</th>

              </tr>
            </thead>
            <tbody>
                           <tr class=" gradeX">
                <td>1</td>
                <td>electronics</td>
                <td>contains electronices items</td>
                <td class="center">0</td>
                <td class="center">Active</td>
                 <td><div class="bootstrap-switch bootstrap-switch-mini bootstrap-switch-animate bootstrap-switch-id-status1 bootstrap-switch-on"><div><span class="bootstrap-switch-handle-on bootstrap-switch-success">ON</span><label for="status1">&nbsp;</label><span class="bootstrap-switch-handle-off bootstrap-switch-danger">OFF</span><input type="checkbox" name="status" id="status1" checked="" data-on-color="success" data-off-color="danger" data-size="mini"></div></div></td>
              </tr>
                            <tr class=" gradeX">
                <td>2</td>
                <td>test</td>
                <td>test</td>
                <td class="center">0</td>
                <td class="center">Active</td>
                 <td><div class="bootstrap-switch bootstrap-switch-on bootstrap-switch-mini bootstrap-switch-animate bootstrap-switch-id-status2"><div><span class="bootstrap-switch-handle-on bootstrap-switch-success">ON</span><label for="status2">&nbsp;</label><span class="bootstrap-switch-handle-off bootstrap-switch-danger">OFF</span><input type="checkbox" name="status" id="status2" checked="" data-on-color="success" data-off-color="danger" data-size="mini"></div></div></td>
              </tr>
                            <tr class=" gradeX">
                <td>3</td>
                <td>sarees</td>
                <td>contains sarres</td>
                <td class="center">1</td>
                <td class="center">Active</td>
                 <td><div class="bootstrap-switch bootstrap-switch-on bootstrap-switch-mini bootstrap-switch-animate bootstrap-switch-id-status3"><div><span class="bootstrap-switch-handle-on bootstrap-switch-success">ON</span><label for="status3">&nbsp;</label><span class="bootstrap-switch-handle-off bootstrap-switch-danger">OFF</span><input type="checkbox" name="status" id="status3" checked="" data-on-color="success" data-off-color="danger" data-size="mini"></div></div></td>
              </tr>

                            </tbody>
          </table>

Answer 1

在像$(this)这样的事件处理程序中，将引用触发事件的对象。

$("[name='status']").on('switchChange', function (e, data) { alert($(this).attr('id')); // or alert($(e.target).attr('id')); would also work });

使用你的html：http://jsfiddle.net/6yWZw/

的jsfiddle示例

检测单击了哪个开关？

1 个答案: