在PHP中向JavaScript函数传参实现FAQ对应问答div的显示隐藏

1. 修改PHP循环内的onclick调用 #

在调用theAnswer时传入当前FAQ对应的序号参数，同时建议修改href属性避免点击后跳转页面顶部：

<?php 
$answer = 1;
foreach($faqArray as $faq) {
    ?>
    <div class='product_container'>
        <div class='product_cell'>
            <!-- 传入当前对应的回答序号 -->
            <a onclick="theAnswer(<?php echo $answer; ?>)" href='javascript:void(0)'>
            <?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;
} ?>

2. 调整JavaScript函数接收参数 #

修改theAnswer函数，接收传入的序号参数，拼接对应回答元素的ID进行显隐操作：

function theAnswer(answerId) {
    // 拼接获取对应回答的DOM元素
    var x = document.getElementById("ans" + answerId);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

内容的提问来源于stack exchange，提问作者banjax