0

よろしく。次のようなphpループを使用して、テーブルのすべての要素に対して.clickイベントを生成しています。

<?php foreach ($elements as $element){ ?>
    var element_id = <?= json_encode($element['element_id']));?>;

    $('#'+element_id+'_button').click(function() {
        $('#'+element_id+'_interval').toggle();
        if ($(this).hasClass('active')){
            $(this).removeClass('active');
        }
        else{
            $(this).addClass('active');
        }
    });
    <?php }?>

問題は、$('#'+element_id+'_interval').toggle();要素が応答していないが、クラスを正しく追加および削除する場合です。誰か助けてください。

4

3 に答える 3

3

クラスを使用すると、コードがよりきれいになりますが、この方法で行う必要がある場合は、 element_id 変数が常に書き換えられていることを知っておく必要があります。

次のようなものを試してください：

<button class="toggler" data-target="#interval_1"></button>

$(".toggler").click(function (ev) {
    ev.preventDefault();
    var target = $(this).data("target"); // would return #interval_1
    $(target).toggle();

    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
});
于 2013-03-15T17:18:22.617 に答える
0

バインド イベントを別のメソッドに入れ、document.ready スクリプトでそのメソッドを呼び出します。

 $(document).ready(function() {
      bindBtns();
});

function bindBtns()
{
    <?php foreach ($elements as $element){ ?>
    var element_id = <?= json_encode($element['element_id']));?>;

    $('#'+element_id+'_button').click(function() {
        $('#'+element_id+'_interval').toggle();
        if ($(this).hasClass('active')){
            $(this).removeClass('active');
        }
        else{
            $(this).addClass('active');
        }
     });
     <?php }?>
}
于 2013-03-15T17:20:08.347 に答える
0

まず、php を javascript から分離することをお勧めします。
そうしないと（他の間で）維持するのが難しくなります。

まず、javascript でループを実行できます。

于 2013-03-15T17:16:07.060 に答える