允许用户从5种不同的圣经版本中选择一种来查看参考实现这一目标的最佳方法是什么？隐藏CSS类？ AJAX？

问题描述

| 我将在我正在制作的网站上引用圣经经文。当用户单击圣经经文时，它将展开以显示该经文。 因此，单击ѭ0，会变成

Genesis 1:1 In the beginning God created the heavens and the earth etc.

在设置面板的页面顶部，我要允许他们选择5个不同版本中的1个。因此，当他们单击该经文时，它将在网站上所有经文参考的5个版本中的1个中显示该经文。 最好的方法是什么？我已经考虑过为每个参考使用5个不同的SPAN，但是我可以在一个页面上创建多达10个或更多参考，那将是40个额外的隐藏范围……ajax会更好吗？您会建议采用哪种方法？     

解决方法

您可以将经文存储在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>

    ,我将使用一种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\");

    ,如果您希望使用一些脚本来设置CSS类来显示和隐藏内容，那是它在客户端上的超快表现。不利之处在于，这意味着您发送了很多用户可能从未看到过的内容（也就是他们从未单击过）。使用AJAX调用的好处是，它会在首次加载时创建较小的有效负载。不利的一面是，这意味着有很多网络呼叫，并且在一台互联网速度慢的机器上可能会很痛苦。 就个人而言，圣经中任何经文的长度不足以担心会增加响应的额外尺寸，因此我将使用一些简单的脚本来隐藏和显示CSS内容，并始终将所有版本发送至客户。     ,由于圣经的大小，如果我想一次加载所有文本，然后用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有很多缺点，但是如果您有大量文本，或者页面上可能有图像，则我认为不必一次加载所有内容。