gpt4 book ai didi

javascript - 始终将展开按钮放在段落末尾

转载 作者:行者123 更新时间:2023-12-02 19:11:17 26 4
gpt4 key购买 nike

这是在线示例:http://jsfiddle.net/Nh4K2/

<div class="container">
Nulla varius diam at sem adipiscing pharetra. Integer eget nulla non purus commodo aliquam. Aenean sed nunc neque. Aliquam eleifend aliquam arcu, ac semper nulla faucibus id. Etiam luctus eleifend tempus. Vestibulum ornare, nisi vitae fermentum luctus, sem lectus rhoncus nibh, auctor iaculis magna turpis nec turpis. Aliquam orci tortor, vulputate at pretium sit amet, blandit eget libero. Sed posuere ultricies mi, sed rhoncus massa ultrices quis. Donec pulvinar vestibulum rhoncus. Donec urna lacus, mollis et convallis at, commodo nec lectus. Maecenas pretium, nunc ac volutpat tempus, dolor orci ultricies massa, eu malesuada urna massa ut orci. Duis eget elit nulla, ornare aliquet nulla. Sed eleifend scelerisque est, eu laoreet lacus ultricies id. Aenean aliquam porttitor augue, quis lacinia augue consequat vitae. Ut venenatis orci massa. Duis dignissim, justo at pellentesque adipiscing, ligula eros mollis tellus, ut accumsan lorem dui eu est.
<div class="whatever">hahahahahaha</div>
<div class="damn">hohohohohohoho</div>
<div class="laugh">lololololololololo</div>
</div>
<span>Show</span>​

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

var $div = $('.container');
$div.each(function() {
var theExcerpt = excerpt($(this).text(), 30);
$(this).data('html', $(this).html()).html( theExcerpt );
});

$('span').click(function() {
var isHidden = $(this).text() == 'Show';
var $div = $(this).prev();
var theExcerpt = excerpt($div.text(), 30);
$div.html( isHidden ? $div.data('html') : theExcerpt);
$(this).remove();
});​

任何可能的方法可以使“显示”切换按钮始终显示在段落末尾?格式看起来像

,而不是显示在第二行

Nulla varius diam at sem adipiscing pharetra. Integer eget nulla non purus commodo aliquam. Aenean sed nunc neque. Aliquam eleifend aliquam arcu, ac semper nulla faucibus…Show

非常感谢您的任何建议或解决方案。

最佳答案

将跨度添加到函数的摘录中。

确保选择跨度的 parent() 而不是其 prev()

http://jsfiddle.net/Nh4K2/3/

<div class="container">
Nulla varius diam at sem adipiscing pharetra. Integer eget nulla non purus commodo aliquam. Aenean sed nunc neque. Aliquam eleifend aliquam arcu, ac semper nulla faucibus id. Etiam luctus eleifend tempus. Vestibulum ornare, nisi vitae fermentum luctus, sem lectus rhoncus nibh, auctor iaculis magna turpis nec turpis. Aliquam orci tortor, vulputate at pretium sit amet, blandit eget libero. Sed posuere ultricies mi, sed rhoncus massa ultrices quis. Donec pulvinar vestibulum rhoncus. Donec urna lacus, mollis et convallis at, commodo nec lectus. Maecenas pretium, nunc ac volutpat tempus, dolor orci ultricies massa, eu malesuada urna massa ut orci. Duis eget elit nulla, ornare aliquet nulla. Sed eleifend scelerisque est, eu laoreet lacus ultricies id. Aenean aliquam porttitor augue, quis lacinia augue consequat vitae. Ut venenatis orci massa. Duis dignissim, justo at pellentesque adipiscing, ligula eros mollis tellus, ut accumsan lorem dui eu est.
<div class="whatever">hahahahahaha</div>
<div class="damn">hohohohohohoho</div>
<div class="laugh">lololololololololo</div>
</div>


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

var $div = $('.container');
$div.each(function() {
var theExcerpt = excerpt($(this).text(), 30);
$(this).data('html', $(this).html()).html( theExcerpt);
});

$('span').click(function() {
var isHidden = $(this).text() == 'Show';
var $div = $(this).parent();
var theExcerpt = excerpt($div.text(), 30);
$div.html( isHidden ? $div.data('html') : theExcerpt);
$(this).remove();
});​

关于javascript - 始终将展开按钮放在段落末尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13676062/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com