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

我正在尝试为从数据库回显的值数组创建一个弹出菜单。单击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";

});


慕码人8056858
浏览 73回答 2
2回答

蝴蝶不菲

如果每个弹出窗口都紧跟在其相应标记之后(如示例中所示),则可以利用该属性来获取所单击的标记后面的 。<div><svg>.nextElementSibling<div><svg>在 HTML 的末尾:<script>// Add an event listener to each .option-3 element:document.querySelectorAll('.option-3').forEach(item => {&nbsp; item.addEventListener('click', event => {&nbsp; &nbsp; let popout = event.target.nextElementSibling; // This element's next element (a .menu-option-popout)&nbsp; &nbsp; popout.style.display = 'block'; // Show the popout&nbsp; })})</script>

慕村225694

首先,PHP是首先执行的,因此除非使用AJAX功能,否则您将无法从JS操作调用php。但这不是您的用例。也就是说,我们可以继续:echo('&nbsp; &nbsp; <svg class="option-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">&nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; </svg>&nbsp;&nbsp;&nbsp; &nbsp; <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">&nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; &nbsp; &nbsp; <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"/>&nbsp; &nbsp; </svg>&nbsp;&nbsp;&nbsp; &nbsp; <div class="menu-option-popout"></div>'.PHP_EOL;而且它只是存储在数据库中的HTML,所以有很多东西需要看:任何错误的转义字符串都可能将混乱放在显示的数据中任何错误的字符编码都会将混乱放在您显示的数据中也许只需在该类上调用 ECMAScript 的 equiv JQuery 方法即可工作并根据需要显示您的项目。.toogle().option-3
打开App,查看更多内容
随时随地看视频慕课网APP