jq标签默认只能选择三条数据

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

    }