1

データベースからデータ (伝記) を表示すると思われるコードがありますが、それをまとめるのに苦労しているので、どんな助けでも大歓迎です。

私がやろうとしているのは、自分のページをバイオで 500 文字だけ表示することです。次に、[さらに表示] セクションをクリックすると、コンテンツの文字が最大限に拡張されます。また、コンテンツが表示されるボックスも拡張する必要があります。現在、[さらに表示] をクリックすると、まったく同じテキストが 2 回表示されますが、残りはデータベースから取得されません。皆さんの助けに感謝します。ここに私のコードがあります:

<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 に答える