1.先放效果图,默认只能选择三条数据,并把这三条数据赋值上,并可以取消重新选择
HTML
css就不上传了
js
点击的时候切换类名,判断含有on类名的长度. 然后循环带有on类名的,push数组里,在动态渲染.
js代码,直接放上.
$(".etc_label_boot>ul>li").click(function () {
$(this).toggleClass("on");
if ($(".etc_label_boot>ul .on").length >= 4) {
$(this).removeClass("on")
}
etc_checks();
})
// 渲染
function etc_checks() {
var data_con = [];
var data_ch;
$(".etc_label_boot>ul .on").each(function () {
data_con.push($(this).html())
})
data_ch = data_con.join("、");
$(".etc_set_label i").html(data_ch);
}