如何用 PHP echo 做 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>
');

記者：

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，所以要看的東西很多：

• 任何錯誤的轉義字符串都會在顯示的數據中造成混亂
• 任何錯誤的字符編碼都會在顯示的數據中造成混亂

也許只需在.option-3 class 上調用 ECMAScript 的 equiv .toogle() JQuery 方法即可工作並按您的意願顯示您的項目。