0

1 つのページに複数のスイッチがあると問題が発生します。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 に答える