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 odio，porta id mollis ullamcorper，imperdiet sit amet odio。在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/

在doc准备就绪时，它将通过此循环遍历每个.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');
    }  
});

jQuery显示更多/更少内容

3 个答案: