0

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

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);
        }
    });
});

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

有人知道出了什么问题，我该如何解决？

4

1 回答 1

1

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

$('.make-switch').on('switch-change', function (e, data) {...});
于 2013-09-15T18:56:48.210 回答