jquery - 允许用户从 5 个不同的圣经版本中选择一个来查看引用资料。实现这一目标的最佳方法是什么？隐藏CSS类？ Ajax ？

Question

我将在我正在制作的网站上引用圣经经文。当用户点击圣经经文时，它会展开以显示该经文。

所以 Genesis 1:1 点击时，变成 Genesis 1:1 In the the beginning God create the heaven and earth etc.

在设置面板页面的顶部，我想让他们从 5 个不同的版本中选择一个。因此，当他们单击该经文时，它会在网站上所有经文引用的这 5 个版本中的 1 个版本中显示。

执行此操作的最佳方法是什么？我考虑过为每个引用设置 5 个不同的 SPAN，但我可以在一个页面上创建多达 10 个或更多的引用，这将是 40 个额外的隐藏跨度……ajax 会更好吗？对于这样的事情，您建议采用什么方法？

Answer 1

您可以将这些经文存储在 XML 文件中，然后使用 Ajax 根据标题返回特定的经文。您的代码可能看起来像这样...

HTML...

<ul>
    <li class="verse"><a href="#">Deuteronomy 31:6</a></li>
    <li class="verse"><a href="#">Joshua 1:9</a></li>
</ul>

jQuery...

        $(".verse a").click(function (event) {
            event.preventDefault();
            $link = $(this).parent();
            $title = $(this).text();
            $.ajax({
                type: "GET",
                url: "verses.xml",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find('verse').each(function () {
                        var title = $(this).find('title').text();
                        // match titles
                        if ($title == title) {
                            var text = $(this).find('text').text();
                            $link.empty().text(title + ': ' + text);
                        }
                    });
                }
            });
        }); // end

XML 文件...

<?xml version="1.0" encoding="utf-8"?>
<verses>
  <verse>
    <title>Deuteronomy 31:6</title>
    <text>Be strong and courageous. Do not be afraid or terrified because of them, for the LORD your God goes with you; he will never leave you nor forsake you.</text>
  </verse>
  <verse>
    <title>Joshua 1:9</title>
    <text>The LORD gave this command to Joshua son of Nun: "Be strong and courageous, for you will bring the Israelites into the land I promised them on oath, and I myself will be with you.</text>
  </verse>
</verses>