將變量傳遞給 PHP 中的 javascript 函數以隱藏或顯示特定的 div？

Question

我正在嘗試創建一個簡單的常見問題解答頁面，用戶單擊問題並在其中顯示答案（或隱藏它，如果再次單擊）。

我讓它工作到所有問題都會顯示標記為“ans1”的答案。 但我想將每個問題中的一個變量傳遞到函數中，以便顯示相關的答案。 問題 1 將顯示答案 1、問題 2 -> 答案 2，依此類推。

我的功能...

function theAnswer() {
    var x = document.getElementById("ans1");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

PHP...

<?php 
$answer = 1;
foreach($faqArray as $faq) {
    ?>
    <div class='product_container'>
        <div class='product_cell'>
            <a onclick="theAnswer()" href='#'>
            <?php echo $faq[0];?> 
            </a>
        </div>
    </div>
    <div class="answer" id="ans<?php echo $answer;?>" style="display:none;">
        <p><?php echo $faq[1];?></p>
    </div>
<?php 
    $answer = $answer + 1;
} ?>

如果我在 onclick="theAnswer()" 中放置一個變量來指示關聯的 div，我怎樣才能讓函數執行所需的結果？

謝謝！

Answer 1

您的 PHP 代碼在服務器端運行，而您的 Javascript 代碼在客戶端運行。 所以這兩個代碼不能相互交互。 我建議使用 CSS 隱藏您的元素，如下所示：

.hide{
 display : none
 }

並將您的 div 設置為像這樣隱藏

<div class='hide' id='answer-<?php echo $answer;?>'> .... </div>

你會像這樣從元素的類列表中刪除 hide

  function theAnswer(num){
   answer = document.querySelector('#answer-' + num)
   answer.classList.remove('hide')
  }

在您的 php 代碼中，您必須輸入值

 .....
<a onclick="theAnswer('<?php echo $answer;?>')" href='#'>
 .....