Question

我在一个页面上有多个开关时遇到问题。我正在使用Mattia Larentis和Peter Stein创建的bootstrap switch。我在我的视图中生成一个数据表，如下所示：

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>

正如您所看到的，我的桌子的每一行都有一个自举开关。这是我的javascript根据引导开关：

$('#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);
        }
    });
});

当您单击某个开关时，我有一个警告框，但问题是这只适用于数据表第一行中的第一个开关。

有人知道什么是错的以及我如何解决这个问题？

Answer 1

对于所有切换元素，您具有相同的id属性，这是无效的HTML，您应该使用公共类而不是使用id来定位元素

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

自举开关 - 一页上的多个开关不起作用

1 个答案: