0

我在显示和隐藏<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，在此先感谢！
4

3 回答 3

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

});
于 2013-05-03T18:33:41.740 回答
0

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

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

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

你会得到正确的文本：http: //jsfiddle.net/6dhMc/

于 2013-05-03T18:15:24.080 回答
0

除了将文本存储在变量中的过程之外，您还可以在段落中设置一行文本的高度，并使用 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 回答