javascript - 将类添加到点击的模态

Question

foreach ( $Select as $List ) {

   print $HTML = '

       <button id="btn_'. $this->ID .'" onclick="Modal( '. $this->ID .', '. 
       $this->ID .' )">'. $Name .'</button>

   ';

   // My modal
   print $HTML = '<div id="modal_'. $this->ID .'" class="modal fix">

      echo $this->ID;

   </div>';

}

echo '
    <script>
        function Modal( IDModal, IDBtn ) {

           const MyBtn   = document.getElementById( "btn_" + id ).id;

           const MyModal = document.getElementById( "modal_" + IDModal ).id;

           MyModal.classList.add("show");

        }
     </script>
';

当我单击按钮打开其派生模式时，出现以下错误

Uncaught TypeError: Cannot read property 'add' of undefined

Answer 1

echo '
    <script>
        function Modal( IDModal, IDBtn ) {
           // remove .id and use  `IDBtn` also
           const MyBtn   = document.getElementById( "btn_" + IDBtn );
           // remove .id
           const MyModal = document.getElementById( "modal_" + IDModal );
           MyModal.classList.add("show");
        }
     </script>
';

您还可以通过使用 ?> 关闭 php-tag 并使用纯 html 标记和 js 代码来简化输出:

// closing previous php-code
?>
<!-- Simple output of tags and js-codes -->
<script>
    function Modal( IDModal, IDBtn ) {
        // remove .id and use  `IDBtn` also
        const MyBtn   = document.getElementById( "btn_" + IDBtn );
        // remove .id
        const MyModal = document.getElementById( "modal_" + IDModal );
        MyModal.classList.add("show");
    }
</script>