php - 使用 PHP 循环生成 JavaScript 代码时出现 $().click() 的问题

Question

问候。我正在使用这样的 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();元素没有响应但它正确添加和删除类时，请有人帮助我。

Answer 1

使用一个类，让你的代码更干净，但是如果你必须这样做，你应该知道你的 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');
    }
});

Answer 2

将绑定事件放入单独的方法中，并在 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 }?>
}

Answer 3

我建议您首先将您的 php 与您的 javascript 分开。
否则（在其他之间）将难以维护。

首先，您可以使用 javascript 进行循环