使用PHP循环生成JavaScript代码时，$(）.click(）存在问题 - problems with $().click() when generating JavaScript code with a PHP loop

problems with $().click() when generating JavaScript code with a PHP loop

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

使用一个类，可以使代码更加干净，但是如果必须以这种方式进行，则应该知道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');
    }
});

我建议您首先将php与javascript分离
否则(在其他人之间(将很难维护。

首先，您可以使用JavaScript

进行循环

将绑定事件放入一个单独的方法中，并在文档中调用该方法。准备脚本：

 $(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 }?>
}