如何使用PHP回显做JS函数？

Question

我正在尝试为从数据库回显的值数组创建一个弹出菜单。单击svg时，需要显示与echo中的svg对应的弹出菜单。除了到目前为止，它仅适用于第一个被回显的。如何修复它，以便它显示与正确的 svg 对应的弹出窗口。这是我目前得到的：PHP/HTML ：echo('    <svg class="option-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">        <path fill-rule="evenodd" clip-rule="evenodd" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>        <path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5C15.8284 10.5 16.5 9.82843 16.5 9C16.5 8.17157 15.8284 7.5 15 7.5C14.1716 7.5 13.5 8.17157 13.5 9C13.5 9.82843 14.1716 10.5 15 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>        <path fill-rule="evenodd" clip-rule="evenodd" d="M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>    </svg>      <div class="menu-option-popout"></div>');.JS：document.querySelector(".option-3").addEventListener("click", function(){    document.querySelector(".menu-option-popout").style.display = "block";});

Answer 1

如果每个弹出窗口都紧跟在其相应标记之后（如示例中所示），则可以利用该属性来获取所单击的标记后面的 。<div><svg>.nextElementSibling<div><svg>

在 HTML 的末尾：

<script>

// Add an event listener to each .option-3 element:

document.querySelectorAll('.option-3').forEach(item => {

  item.addEventListener('click', event => {

    let popout = event.target.nextElementSibling; // This element's next element (a .menu-option-popout)

    popout.style.display = 'block'; // Show the popout

  })

})

</script>

Answer 2

首先，PHP是首先执行的，因此除非使用AJAX功能，否则您将无法从JS操作调用php。但这不是您的用例。

也就是说，我们可以继续：

echo('

    <svg class="option-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">

        <path fill-rule="evenodd" clip-rule="evenodd" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

        <path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5C15.8284 10.5 16.5 9.82843 16.5 9C16.5 8.17157 15.8284 7.5 15 7.5C14.1716 7.5 13.5 8.17157 13.5 9C13.5 9.82843 14.1716 10.5 15 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

        <path fill-rule="evenodd" clip-rule="evenodd" d="M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

    </svg>  

    <div class="menu-option-popout"></div>

');

应该这样写，以提高生成的HTML文档的可读性：

echo '<svg class="option-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">

        <path fill-rule="evenodd" clip-rule="evenodd" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

        <path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5C15.8284 10.5 16.5 9.82843 16.5 9C16.5 8.17157 15.8284 7.5 15 7.5C14.1716 7.5 13.5 8.17157 13.5 9C13.5 9.82843 14.1716 10.5 15 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

        <path fill-rule="evenodd" clip-rule="evenodd" d="M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

    </svg>  

    <div class="menu-option-popout"></div>'.PHP_EOL;

而且它只是存储在数据库中的HTML，所以有很多东西需要看：

任何错误的转义字符串都可能将混乱放在显示的数据中

任何错误的字符编码都会将混乱放在您显示的数据中

也许只需在该类上调用 ECMAScript 的 equiv JQuery 方法即可工作并根据需要显示您的项目。.toogle().option-3