0

タグのコンテンツの表示と非表示に問題が<p>あります。必要なことは、ページが読み込まれたときに 160 文字が 40 文字に制限され、[さらに表示] をクリックすると 160 文字が表示され、クリックすると 160 文字が表示されることです。ボタンをもう一度押すと、40 文字しか表示されません。私の問題は、すべてのタグのすべてのコンテンツが<p>それぞれのタグにまとめて表示されることです。事前に感謝します!

HTML

<section class="row featured">
        <div class="column four comment">
            <img src="images/gallery/gallery-1.jpg" alt="">
            <div class="content">
                <h2>Lorem Ipsum</h2>
                <p class="limit">Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.</p>
                <button class="more align-right"><p class="highlight">Read more</p></button>
            </div>
        </div>
        <div class="column four comment">
            <img src="images/gallery/gallery-3.jpg" alt="">
            <div class="content">
                <h2>Lorem Ipsum</h2>
                <p class="limit">Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.</p>
                <button class="more align-right"><p class="highlight">Read more</p></button>
            </div>
        </div>
        <div class="column four comment">
            <img src="images/gallery/gallery-2.jpg" alt="">
            <div class="content">
                <h2>Lorem Ipsum</h2>
                <p class="limit">Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.</p>
                <button class="more align-right"><p class="highlight">Read more</p></button>
            </div>
        </div>
</section>

jQuery

 $(document).ready(function {
    var $this = $(this);
    var content = $('.limit').text();
    var limit = content.substring(0, 40);

    $('.limit').text(limit);    

    $('.more').click(function() { 

        var $this = $(this);
        var test = $this.siblings('p').text();
        var length = test.length;

        if(length == 40){

            $this.siblings('p').text(content);

        }
        else {

            $this.siblings('p').text(limit);
        }

    });
 });
  • 返されるのは、「Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.」です。pごとに3回、よろしくお願いします！
4

3 に答える 3

1

3 つのテキストvar content = $('.limit').text();をすべて取得すると、文が 3 回表示されるのはそのためです。

この関数.data()を使用して、各要素のテキストを保存し、ボタンをクリックしたときにそれを取得できます。

ここでフィドル：http://jsfiddle.net/SadLe/

ドキュメントの準備ができたら、次の.limitループでそれぞれを通過します。

$('.limit').each(function(){
    $(this).data('content', $(this).text())
    $(this).data('limit', $(this).text().substring(0, 40))
    $(this).text( $(this).data('limit'))
})

次に、クリックすると、保存したそれぞれのデータが取得されます。

$('.more').click(function() { 

    var $this = $(this);
    var elP = $this.siblings('p');
    var length = elP.text().length;

    if(length == 40){

        elP.text(elP.data('content'));

    }
    else {
        elP.text(elP.data('limit'));
    }

});
于 2013-05-03T18:33:41.740 に答える
0

テキストを変数に格納するプロセスを経る代わりに、段落に 1 行のテキストの高さを設定し、css text-overflow を使用して残りのテキストを非表示にすることもできます。次に、クリックすると全文が表示されます。ここでフィドル: http://jsfiddle.net/carasin/CpEZw/

CSS

.limit {
    text-overflow:ellipsis;
    overflow:hidden;
    line-height:1.5em;
    height:1.5em;;
    white-space: nowrap;
}

jquery

$(".more").click(function(){
    if (! $(this).hasClass('less')){
        $(this).addClass('less').prev('.limit').removeClass('limit').addClass('nolimit');
        $(this).children('p').text('Close');
    } else {
        $(this).removeClass('less').prev('.nolimit').removeClass('nolimit').addClass('limit');
        $(this).children('p').text('Read More');
    }  
});
于 2013-05-03T18:47:17.307 に答える