Valine 添加长评数量限制 –
在 Valine 文件中找到 "return r || (r = u.create("div", "class", "vquote"), n.appendChild(r)..."
字段,并按以下自定义增改:
return r || (
r = u.create("div", "class", "vquote"), n.appendChild(r),
setTimeout(() => {
var vmax = 3, //设置最大显示数量
vcard = r.children, //获取vquote下子评论
vcards = vcard.length; //vquote下评论总数(可用于子评论最大值)
if(vcards > vmax){
r.classList.add('overview'); //为vquote添加对应class样式
var btn=document.createElement("BUTTON"), //创建展开按钮
btnTxt=document.createTextNode('展开 ' (vcards-vmax) ' 条评论'); //剩余评论=子评论总数-最大显示数量
btn.appendChild(btnTxt);
btn.className = 'vbtn extend_addon'; //为button添加对应class样式
r.appendChild(btn);
for(var i=0; i<=vcards;i ) {
let _this = vcard[i]; //遍历vcard子评论,判断元素下标大于最大值(且不能为最大值,指button)设置隐藏
i>vmax-1&&i!=vcards ? _this.setAttribute("style","display: none;") : false;
};
btn.onclick = function(){
this.remove(); //button点击后销毁
r.classList.remove('overview'); //移除vquote样式
for(var i=0; i<=vcards;i ) {
let _this = vcard[i]; //遍历vcard子评论,判断元素下标大于最大值(且不能为最大值)取消隐藏
i>vmax-1&&i!=vcards ? _this.removeAttribute("style") : false;
}
}
}
}, 0)
),r
为 Valine 长评论添加评论数量限制
还是 Valine ,这次为 valine 添加评论隐藏 extend
展开功能。不过有人说了 valine 自带不是有吗?是的,的确有,不过仅限于单个评论字符串限制,而不能隐藏展开当条评论内多条评论,所以需求是评论数量限制,超出n条评论则隐藏,点击按钮即显示效果。
老规矩,说下思路
- 遍历
vlist
下的直接vcard
子元素(因为二级评论拥有相同的类名,需要只选择直接子元素) - 判断并添加
expend
的条件(设置限制最大显示数量) - 循环输出当前
vquote
下的所有vcard
(二级评论数量) - 判断
vquote
下vcard
的下标,如果大于最大显示数量时则隐藏当前vcard
- 最后添加按钮,用于展开评论
$('.v .vlist').children('.vcard').each(function(){
let subVcard = $(this).find('.vcard'), //二级 vcard
subVcardBox = $(this).find('.vquote'), //二级 vcard 父元素
subVcardMax = 3; //最大显示数量
if(subVcard.length > subVcardMax){
subVcard.parent().addClass('overview');
subVcardBox.append('<button class="vbtn extend_addon">剩余 ' (subVcard.length-subVcardMax) ' 条评论</button>');
for(var i=0;i<=subVcard.length;i ){
let subVcardEach = subVcard[i]; //循环二级 vcard
if(i>subVcardMax-1 && subVcardEach != undefined){
$(subVcardEach).addClass('hide');
};
};
};
});
//点击事件
$('body').on('click','.v .vlist .vcard .vquote.overview .vbtn.extend_addon',function(){
$(this).parent().attr('class','vquote openview').end().remove();
});
以上方法存在bug
已修复(使用最新)setTimeOut
监测时几率获取不到动态元素导致失效加载更多评论后如果有长评无法自动处理已修复(使用最新)