jQuery显示更多/更少内容

Question

我在显示和隐藏<p>标记的内容时遇到问题，我需要做的是，这样，当页面加载时我的160个字符限制为40个，然后单击“显示更多”时，它将显示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 dioo，porta id mollis ullamcorper，imperdiet sit amet dioo。在eleifend dapibus massa ac aliquam中。Nullam vulputate lectus ac nunc molestie mollis。” 每个p乘以3，请先谢谢！

Answer 1

做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'));
    }

});

Answer 2

您的内容变量将从.limit类的所有三个实例中获取文本，因此您将获得三重文本。

如果将其限制为仅这样的第一个实例：

var content = $('.limit:first').text();

您将获得正确的文本： http : //jsfiddle.net/6dhMc/

Answer 3

除了可以将文本存储在变量中之外，还可以在段落上设置一行文本的高度，然后使用CSS文本溢出来隐藏其余文本。 然后单击显示全文。 在这里提琴： 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');
    }  
});