1

我有一个代码应该显示我的数据库中的数据（传记），但我正在努力将它整合在一起，所以任何帮助将不胜感激。

我想要做的是让我的页面只显示 500 个字符，然后当您单击显示更多部分时，它将最大限度地扩展内容字符。我还需要扩展显示我的内容的盒子。现在，当单击显示更多时，我两次得到完全相同的文本，但没有从我的数据库中得到其余的文本。比你们所有人的帮助，这是我的代码：

<h5>About:</h5>  
    <script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "list-item";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script><p><?php echo $row->biography; ?><a href="javascript:ShowContent('uniquename')" backgorund="orange">
    ...show more
    </a></p><br/>
    <a href="javascript:ShowContent('uniquename')" backgorund="orange">

    </a>
    <div id="uniquename" style="display:none;">
    <p><?php echo $row->biography; ?></p>
    <a href="javascript:HideContent('uniquename')">
    show less
    </a>
    </div>
4

3 回答 3

2

当您显示所有内容时，您还应该隐藏第一个内容：

<a href="javascript:ShowContent('uniquename'); this.style.display = 'none'">
Show more....
</a>

this.style.display = "none"单击时添加的主要区别show more。

onclick使用事件来实现这一点也很好

于 2013-10-29T13:45:27.763 回答
1

这将满足您的需求：

<body>
    <p id="Content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    <script>
        (function (){
            var content = document.getElementById("Content").innerHTML;
            var shown;
            var hidden;
            var html;
            if (content.length > 500) {
                shown = content.substring(0, 499);
                hidden = content.substring(500, content.length);
                html = "<div id=\"shown\">" + shown + "<span id=\"showText\" onclick=\"showMore()\" style=\"cursor:pointer\">Show More</span></div><div id=\"hidden\" style=\"display:none;\">" + hidden + "<span id=\"hideText\" onclick=\"showLess()\" style=\"cursor:pointer;display:none;\">Show Less</span></div></div>"
            }
            else {
                shown = content;
                html = "<div id=\"shown\">" + shown + "</div>"
            }
            document.getElementById("Content").innerHTML = html;
        })()
        var showMore = function (){
            document.getElementById("hidden").setAttribute("style", "display:block;");
            document.getElementById("showText").setAttribute("style", "display:none;");
            document.getElementById("hideText").setAttribute("style", "display:block;cursor:pointer;");
        }
        var showLess = function () {
            document.getElementById("hidden").setAttribute("style", "display:none;");
            document.getElementById("showText").setAttribute("style", "display:block;cursor:pointer;");
            document.getElementById("hideText").setAttribute("style", "display:none;");
        }
    </script>    
</body>
于 2013-10-29T14:04:17.220 回答
1

好吧，这肯定会发生，因为您在元素内打印完全相同的内容#uniquename。

如果您想截断文本以在第一段中仅显示一小部分，您可以使用 PHP 的substr函数。在以下示例中，我使用了 10 个字符的限制：

<?php
$content = 'lorem ipsum dolor sit amet';
if (strlen($content) > 10) {
    echo substr($content, 0, 10) . '&hellip;';
} else {
    echo $content;
}
?>
于 2013-10-29T13:48:24.603 回答