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 루프를 사용하여 내 테이블의 모든 요소에 대한 .click 이벤트를 생성하고 제발.

Answer 1

먼저 자바 스크립트와 PHP를 구분할 것을 권합니다.
그렇지 않으면 (다른 것 사이) 유지 관리가 어려울 수 있습니다. 시작으로

, 당신은 당신이 당신이 element_id 변수가 지속적으로 다시 작성되고 있음을 알아야한다 이런 식으로해야하지만 경우,

가

Answer 2

사용이 클래스는, 코드를 많이 청소기를 만드는 자바 스크립트로 루프를 할 수 .

같은 시도 :

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