允许用户从 5 种不同的圣经版本中选择一个来查看参考文献。实现这一目标的最佳方法是什么？隐藏 css 类？阿贾克斯？

Question

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

当点击Genesis 1:1时，会变成Genesis 1:1 In the beginning God created the heavens and the earth etc.

在设置面板的页面顶部，我想让他们选择5个不同的版本之一。所以当他们点击这首诗的时候，它会在网站上所有引用的诗的5个版本中显示出来。

最好的方法是什么?我想过为每个引用设置5个不同的span，但我可以在一个页面上设置多达10个或更多的引用，这将是40个额外的隐藏span……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>

Answer 2

我会使用JSONP类型的方法。创建一个请求处理程序，它编写包含给定版本所需的脚本的JavaScript。如果变量被写入全局作用域，你甚至不需要回调& &;当用户单击展开诗句时，脚本应该被加载。

你的处理器会这样写:

verses = {
    Genesis: {
        1: { 
            1: "In the beginning God created ...",
            5: "And God called the light Day ..."
        },
        6: { 19: "And of every living thing of all flesh, two of every sort ..." }
    },
    John: {
        1: { 1: "In the beginning was the Word ..." }
    }
};

然后在选择版本后注入脚本加载诗句。

function loadBibleVerses(references, version)
{
    var script = document.body.appendChild(document.createElement("script"));
    script.src = "/bibleVerses.ashx?version=" + version + "&references=" + references;
}
loadBibleVerses("Genesis:1:1,Genesis:1:5,Genesis:6:19,John:1:1", "KJV");

Answer 3

如果你希望你的好处是使用一些脚本来设置CSS类来显示和隐藏内容，这在客户端上是超快的。缺点是，这意味着你发送了大量的内容，而这些内容可能永远不会被用户看到(也就是他们永远不会点击它)。使用AJAX调用的好处是它在第一次加载时创建了一个小的负载。缺点是，这意味着有很多网络电话，在网速慢的机器上，这可能是一个痛苦。

就我个人而言，圣经中任何诗句的长度都不足以担心额外的大小被附加到响应上，所以我会使用一些简单的脚本来隐藏和显示CSS的内容，并且总是将所有版本发送给客户端。

Answer 4

由于圣经的大小，我不知道我是否想要一次加载所有文本，然后用CSS/jQuery隐藏它们。我可能会使用某种AJAX。例如:

index . php:

<h2><a href="genesis.php" class="loadlink">Genesis 1:1</a></h2>
<p class="genesis"></div>

loader.js:

$(".loadlink").click(function(){
   var href = $(this).attr("href");
   $("p.genesis").load(href);
   return false;
});

现在，举个例子，如果你要把圣经的每一章都放在单独的一页上，那么我可能会使用某种扩展器。

当然，AJAX有很多缺点，但是如果页面上有大量的文本，也许还有图像，我觉得一次加载所有内容是相当不必要的。