1

私のテキスト コンテンツは mysql から出力されますが、今のところプレーン テキストとして扱うことができます。show more単語を 120 単語に制限してから、トグルボタンを追加したいと思います。トグルが簡単に実現できることは知っていますが、言葉を制限して、さらに表示するトグル ボタンを自動的に挿入する方法がよくわかりません。

これは私のコードです

<div id="paragrah">
    Donec vitae mollis leo. Quisque ut metus ac velit porttitor sollicitudin quis mattis purus. Quisque id risus id sem porta gravida eu nec neque. Praesent non odio nibh, vitae tincidunt sapien. Maecenas rutrum mollis mauris, eu condimentum nunc viverra nec. Donec fringilla imperdiet volutpat. Morbi in sem ante. Phasellus libero purus, viverra a aliquam ac, eleifend eu nisl. Etiam quis odio nec quam rhoncus iaculis ac quis velit. Sed ut lacus quis enim tempor ullamcorper. Donec odio ligula, porta et bibendum aliquam, blandit vitae lacus.
    <div class="myimage">picture</div>
    <div class="myimage">picture</div>
    <div class="myimage">picture</div>
</div>

また、私が達成しようとしていることを説明するために画像を添付しました。

ここに画像の説明を入力

4

4 に答える 4

3

このスニペットを試してください：

function excerpt(str, nwords) {
  var words = str.split(' ');
  words.splice(nwords, words.length - 1);
  return words.join(' ') + '&hellip;';
}

次に、元のコンテンツをキャッシュし、テキストに基づいて「表示」または「非表示」dataを切り替えるボタンを作成します。dataexcerpt

デモ： http： //jsfiddle.net/elclanrs/QLYey/

于 2012-11-07T01:04:49.677 に答える
2

なぜ単語数を気にするのですか？与えられた数の単語が占める面積は、単語の長さによって大きく異なります。最善のアプローチは、おそらくこれをCSS/javascriptで処理することです。

divを固定の高さにし、テキストオーバーフロー設定を提供します（オーバーフローのカスタム文字列を定義できます）。次に、javascript拡張を使用すると、固定の高さとテキストオーバーフローをオーバーライドするクラスを使用して、完全なコンテンツを提供できます。

于 2012-11-07T01:04:44.213 に答える
1

通常、HTML を作成する任意の言語を使用できるサーバー側で「ティーザー」テキストの書式設定を処理します。次に、クライアントは JavaScript を実行して、ページに非表示で既に存在するコンテンツを展開できます。完全な例は、jsfiddle の下部にリンクされており、複数の展開可能なセクションがあります。

jQuery を使用した拡張コード:

$('.show-more').click(function(event) {
    $(event.target)
        .closest('.expando')
            .find('.three-dots')
                .remove()
                .end()
            .find('.rest')
                .show()
                .end()
            .end()
        .detach();
});​

jsfiddle での作業例: http://jsfiddle.net/wJMh9/3/

于 2012-11-07T01:10:34.423 に答える
0

あなたはこのように試すことができます

var text=$("#paragrah").html().substring(1,200)​;
$("#paragrah").html(text + '...' );​​​​
于 2012-11-07T01:21:14.570 に答える