引导开关-一页上的多个开关不起作用

Question

I have a problem when I have multiple switches on one page. I'm using the bootstrap switch created by Mattia Larentis and Peter Stein. I generate a datatable in my view like this:

foreach($this->projects as $project){
foreach($project[$i] as $project_quiz){ ?>
    <tr class="rowclick">
        <td>10</td>
        <td><a class="project_click" id="<?= $project["Id"] ?>"><?= $project["Name"] ?></a></td>
        <td><a class="quiz_click" id="<?= $project_quiz["QuizId"] ?>" href="#" ><?= $project_quiz["Title"] ?></a></td>
        <td>
            <a href="<?php echo $this->url(array('controller'=>'quiz', 'action'=>'edit', 'quizid' => $project_quiz["QuizId"]), null, true);?>" class="no-js"><i class="icon-edit"></i></a>
            <a href="<?php echo $this->url(array('controller'=>'quiz', 'action'=>'results', 'quizid' => $project_quiz["QuizId"]), null, true);?>" class="no-js"><i class="icon-bar-chart"></i></a>
            <a href="<?php echo $this->url(array('controller'=>'quiz', 'action'=>'distribute', 'quizid' => $project_quiz["QuizId"]), null, true);?>" class="no-js"><i class="icon-rocket"></i></a>
            <a href="<?php echo $this->url(array('controller'=>'quiz', 'action'=>'share', 'quizid' => $project_quiz["QuizId"]), null, true);?>" class="no-js"><i class="icon-share"></i></a>

            <div id="label-toggle-switch" data-id="<?php echo $project_quiz["QuizId"] ?>" class="make-switch switch-small" data-on="default" data-on-label="Active" data-off-label="Inactive">
                <input type="checkbox" checked>
            </div>
        </td>
    </tr>

As you can see I have a bootstrap switch on every row of my table. This is my javascript according to the bootstrap switch:

$('#label-toggle-switch').on('switch-change', function (e, data) {
    alert("test");
    var quizid = $(this).attr('data-id');

    var status = data.value; // TRUE OR FALSE

    $.ajax({
        url: '/overview/changestatus',
        type:"POST",
        data: {quizid: quizid, status: status},
        success: function(data) {
            console.log("ajax call succces");
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});

I have an alert box when you click on a switch, but the problem is this only works on the first switch in the first row of the datatable.

Does someone knows what's wrong and how I can fix this?

Answer 1

您对所有switch元素都具有相同的id属性，但这不是有效的HTML，您应该使用通用类来定位元素，而不要使用id

$('.make-switch').on('switch-change', function (e, data) {...});