在使用PHP循環生成JavaScript代碼時使用$（）。click（）時出現問題

Question

問候。

<?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();元素沒有響應，但它增加和刪除正確的類，有人幫助： 我使用一個PHP循環這樣產生。點擊事件對我的表的每一個元素我請。

Answer 1

我會建議你首先將你的php從你的javascript中分離出來。
否則（在其他之間）將難以維護。

作爲開始，你可以做循環使用JavaScript

Answer 2

使用一個類，讓你的代碼會更加清晰，但如果你必須這樣做，這樣你應該知道，你的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 3

將結合事件成爲一個單獨的方法，並調用該方法在您的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 }?> 
}