Question

我想复制此网站的词汇表功能：https://www.mortgageloan.com/finance-glossary-terms

目标：点击一个字母，将显示与该字母对应的内容。单击另一个字母，仅显示单击的字母内容。

我有我的dictionary.php文件，其数组设置如下：

$dictionary = array(
    'A'=>array(
        'Term1'=>'Definition1',
        'Term2'=>'Definition2',
    ),
    'B'=>array(
        'Term1'=>'Definition1',
        'Term2'=>'Definition2',
    ),
);

我可以使用foreach循环显示术语和定义，但它会显示所有术语和定义。当用户点击该字母时，如何仅显示与其对应字母相关的术语和定义？

Answer 1

您链接的网站似乎没有像@JeremyE建议的那样使用AJAX。它只是加载了一堆“标签”（每个字母一个），然后让你在演示here之间切换它们。它仍然会立即加载所有数据，只需隐藏部分。

菜单栏

这会遍历$dictionary中的每个字母，并将其添加为按钮

<div>
    <?php foreach($dictionary as $letter => $terms) { ?>
        <button onclick="openTab('<?= $letter ?>')"><?= $letter ?></button>
    <?php } ?>
</div>

JS添加功能

此JS函数只显示具有特定ID的选项卡，并隐藏所有其他选项卡。它由菜单内的按钮调用。

<script>
function openTab(tab) {
    var i;
    var x = document.getElementsByClassName("tab");

    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }

    document.getElementById(tab).style.display = "block";
}
</script>

这为您提供了完成方式的基本结构。

Answer 2

我不确定你是怎么称它的，所以我的答案可能需要根据调用进行微调，但如果你要向dictionary.php文件发送一个AJAX请求，其中包含有关该字母的信息。点击了，php文件可能看起来像这样（以简单的方式）：

$letter = $_REQUEST['letter']  // Retrieve value for key 'letter'

foreach ($dictionary[$letter] as $term => $def) {  // Loop through terms in the dictionary for only the letter clicked
   echo $term . ": " . $def . " ";  // Print each term followed by its definition
}

如果你当前没有向php文件发送任何信息（这可能因为你说你只是循环遍历整个字典），你需要使用一个叫做AJAX请求的东西才能给出关于单击了什么字母的php文件信息。在jQuery中看起来像这样：

let letterClicked = "A"  // Change this to the location of the letter information in the clicked element (could be element.value or element.innerhtml)

$.get("dictionary.php", { letter: letterClicked }, function ( data ) {
     // Do something with the data that is returned
})

我希望有所帮助！如果您有关于有助于改进我的答案的问题的更多信息，请与我们联系。

如何基于链接动态显示php内容

2 个答案:

菜单栏

标签：

JS添加功能