phpstudy集成环境

 首页 > jQuery实现多条件筛选出来的时候删除不了？

jQuery实现多条件筛选出来的时候删除不了？

$(document).ready(function(){

    $("#select1 li").click(function () {
        $(this).addClass("selected").siblings().removeClass("selected");
        if ($(this).hasClass("select-all")) {
            $("#selectA").remove();
        } else {
            var copyThisA = $(this).clone();
            if ($("#selectA").length > 0) {
                $("#selectA a").html($(this).text());
            } else {
                $(".filter_result").append(copyThisA.attr("id", "selectA"));
            }
        }
    });

    $("#select2 li").click(function () {
        $(this).addClass("selected").siblings().removeClass("selected");
        if ($(this).hasClass("select-all")) {
            $("#selectB").remove();
        } else {
            var copyThisB = $(this).clone();
            if ($("#selectB").length > 0) {
                $("#selectB a").html($(this).text());
            } else {
                $(".filter_result").append(copyThisB.attr("id", "selectB"));
            }
        }
    });

    $("#select3 li").click(function () {
        $(this).addClass("selected").siblings().removeClass("selected");
        if ($(this).hasClass("select-all")) {
            $("#selectC").remove();
        } else {
            var copyThisC = $(this).clone();
            if ($("#selectC").length > 0) {
                $("#selectC a").html($(this).text());
            } else {
                $(".filter_result").append(copyThisC.attr("id", "selectC"));
            }
        }
    });

    $("#select4 li").click(function () {
        $(this).addClass("selected").siblings().removeClass("selected");
        if ($(this).hasClass("select-all")) {
            $("#selectD").remove();
        } else {
            var copyThisC = $(this).clone();
            if ($("#selectD").length > 0) {
                $("#selectD a").html($(this).text());
            } else {
                $(".filter_result").append(copyThisC.attr("id", "selectD"));
            }
        }
    });

    $("#selectA").on("click", function () {
        $(this).remove();
        $("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
    });

    $("#selectB").on("click", function () {
        $(this).remove();
        $("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
    });

    $("#selectC").on("click", function () {
        $(this).remove();
        $("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
    });

    $("#selectD").on("click", function () {
        $(this).remove();
        $("#select4 .select-all").addClass("selected").siblings().removeClass("selected");
    });


    $(".filter_result li").on("click", function () {
        if ($(".filter_result").length > 1) {
            $(".select-no").hide();
        } else {
            $(".select-no").show();
        }
    });

});
<div class="search_filter">
                        <div class="filter_con">
                            <div class="filter_conc_tit">品牌:</div>
                            <ul class="filter_right" id="select1">
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">HSTYLE/韩都衣舍</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                                <li><a href="javascript:;">秋水伊人</a></li>
                            </ul>
                        </div>
                        <div class="filter_con">
                            <div class="filter_conc_tit">服装款式细节:</div>
                            <ul class="filter_right" id="select2">
                                <li><a href="javascript:;">拼接</a></li>
                                <li><a href="javascript:;">拉链</a></li>
                                <li><a href="javascript:;">印花</a></li>
                                <li><a href="javascript:;">蕾丝</a></li>
                                <li><a href="javascript:;">褶皱</a></li>
                                <li><a href="javascript:;">蝴蝶结</a></li>
                                <li><a href="javascript:;">抽褶</a></li>
                                <li><a href="javascript:;">立体装饰</a></li>
                                <li><a href="#">纽扣</a></li>
                                <li><a href="#">绣花 </a></li>
                                <li><a href="#">口袋</a></li>
                                <li><a href="#">系带</a></li>
                            </ul>
                        </div>
                        <div class="filter_con">
                            <div class="filter_conc_tit">选购热点:</div>
                            <ul class="filter_right" id="select3">
                                <li><a href="#">田园小清新</a></li>
                                <li><a href="#">加肥加大</a></li>
                                <li><a href="#">包臀</a></li>
                                <li><a href="#">拼接撞色</a></li>
                                <li><a href="#">名媛小香风</a></li>
                            </ul>
                        </div>
                        <div class="filter_con">
                            <div class="filter_conc_tit">价格:</div>
                            <ul class="filter_right" id="select4">
                                <li><a href="#">0-99元</a></li>
                                <li><a href="#">100-299元</a></li>
                                <li><a href="#">300-499元 </a></li>
                                <li><a href="#">500-999元</a></li>
                                <li><a href="#">1000元以上</a></li>
                            </ul>
                        </div>
                        <div class="filter_con">
                            <div class="filter_conc_tit">已选条件:</div>
                            <ul class="filter_result">
                                <li class="select-no" style="display: block;">暂时没有选择过滤条件</li>
                            </ul>
                        </div>
                    </div>

以上jq是我从http://www.helloweba.com/demo/fselect/#抄的。
但是发现live 在1.7以上不再支持了。所以我把live换成on绑定事件。
但是有两个问题：
1、问题暂时没有选择过滤条件居然没有隐藏？？
2、在已选条件按钮中想删除。都删除不了。不应该啊。上面已经写了remove()。为什么按钮这块没移走？
难道是on跟live写法不一样？

帮你优化了一下代码, 你目前的代码不具备可扩展性,当有更多的条件时, 需要再写更多的代码.
但其实他们都是有共性的, 所以帮你优化了一下代码.
因为你提供的结构中没有 select-all(全部), 所以下面的代码中不包含对 select-all 的处理.
你可以做为练习, 自己尝试添加上去.

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{font-size: 14px;}
    a{text-decoration:none;}
    ul li{display:inline-block;margin: 2px 6px;}
    .selected{color: red; background-color:#0f0;}
  </style>
 </head>
 <body>
  <div class="search_filter">
        <div class="filter_con">
            <div class="filter_conc_tit">品牌:</div>
            <ul class="filter_right" id="select1">
                <li><a href="javascript:;">秋水伊人</a></li>
                <li><a href="javascript:;">HSTYLE/韩都衣舍</a></li>
                <li><a href="javascript:;">秋水伊人1</a></li>
                <li><a href="javascript:;">秋水伊人2</a></li>
                <li><a href="javascript:;">秋水伊人3</a></li>
                <li><a href="javascript:;">秋水伊人4</a></li>
                <li><a href="javascript:;">秋水伊人5</a></li>
                <li><a href="javascript:;">秋水伊人6</a></li>
                <li><a href="javascript:;">秋水伊人7</a></li>
                <li><a href="javascript:;">秋水伊人8</a></li>
                <li><a href="javascript:;">秋水伊人9</a></li>
                <li><a href="javascript:;">秋水伊人10</a></li>
                <li><a href="javascript:;">秋水伊人11</a></li>
                <li><a href="javascript:;">秋水伊人12</a></li>
                <li><a href="javascript:;">秋水伊人13</a></li>
                <li><a href="javascript:;">秋水伊人14</a></li>
            </ul>
        </div>
        <div class="filter_con">
            <div class="filter_conc_tit">服装款式细节:</div>
            <ul class="filter_right" id="select2">
                <li><a href="javascript:;">拼接</a></li>
                <li><a href="javascript:;">拉链</a></li>
                <li><a href="javascript:;">印花</a></li>
                <li><a href="javascript:;">蕾丝</a></li>
                <li><a href="javascript:;">褶皱</a></li>
                <li><a href="javascript:;">蝴蝶结</a></li>
                <li><a href="javascript:;">抽褶</a></li>
                <li><a href="javascript:;">立体装饰</a></li>
                <li><a href="#">纽扣</a></li>
                <li><a href="#">绣花 </a></li>
                <li><a href="#">口袋</a></li>
                <li><a href="#">系带</a></li>
            </ul>
        </div>
        <div class="filter_con">
            <div class="filter_conc_tit">选购热点:</div>
            <ul class="filter_right" id="select3">
                <li><a href="#">田园小清新</a></li>
                <li><a href="#">加肥加大</a></li>
                <li><a href="#">包臀</a></li>
                <li><a href="#">拼接撞色</a></li>
                <li><a href="#">名媛小香风</a></li>
            </ul>
        </div>
        <div class="filter_con">
            <div class="filter_conc_tit">价格:</div>
            <ul class="filter_right" id="select4">
                <li><a href="#">0-99元</a></li>
                <li><a href="#">100-299元</a></li>
                <li><a href="#">300-499元 </a></li>
                <li><a href="#">500-999元</a></li>
                <li><a href="#">1000元以上</a></li>
            </ul>
        </div>
        <div class="filter_con">
            <div class="filter_conc_tit">已选条件:</div>
            <ul class="filter_result">
                <li class="select-no" style="display: block;">暂时没有选择过滤条件</li>
            </ul>
        </div>
    </div>
    <script src="jquery-1.11.3.js"></script>
    <script>

        (function(){

            var selected = 0,//记录已经选中的个数
                select_area = $('.filter_result');//存放 已选择 的容器


            //单击 已经有的项目时, 执行删除
            select_area.on('click', '.selected', function(){

                var obj = $(this);

                //将与当前对应的这个分类下面的那个 标记为选中的, 移除 选中的样式
                $('#' + obj.attr('stype') + ' .selected').removeClass("selected");

                obj.remove();//删除自身

                selected--;

                select_area.trigger('update');

                return false;
            }).on('update', function(){//绑定自定义事件
                ////根据目前选中的个数, 决定 select-no 的显示/隐藏
                $(".select-no")[selected > 0 ? 'hide' : 'show']();
            });



            $('body').on('click', '.filter_right li', function () {
                $(this).addClass("selected").siblings().removeClass("selected");

                var stype = $(this.parentNode).attr('id'),
                    exists = select_area.find('.selected[stype=' + stype + '] a');

                //如果已经有同一个分类的数据存在了
                if(exists.length > 0){
                    //替换它里面内容
                    exists.html($(this).text());
                }else{
                    //否则, 添加上去一个, 所以计数器加1
                    selected++;
                    select_area.append($(this).clone().attr("stype", stype));
                }

                select_area.trigger('update');

                return false;
            });
        })();
    </script>
 </body>
</html>

演示地址: https://xqin.net/temp/fselect.html

此演示地址不保证长期有效.
请原谅我那渣渣的css代码.

【热门文章】
【热门文章】