如何避免网页中相同class的属性的点击事件???

Question

当我点击这些楼层对应的房号的时候,我需要获取 对应的楼层号和用户选取了哪些房号,

当前代码实现的是用户选取了房号的时候,获取被选取的房号,再获取层数,房号是存在数组里面,当前看来是没有问题,可以获取到我想要的,但是这里有一个困惑的问题...

我点击第一层里面的时候,数据获取是正常的,当时点击第二层里面的房号的时候,那个房号的数据一起存到第一层的数据里面了,该如何把这些数据分开??? 例如第一层就是第一层的数据,第二层就是第二层的数据... 目前的代码如下:

<div id="son_house_room_number_btns">
    <div class="son_house_room_number_area_div">
        <p>第1层</p>
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">
                    <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">A101</a>
                </div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">
                    <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">A102</a>
                </div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">
                    <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">A103</a>
                </div>
            </div>
        </div>
    </div>
</div>

selectRoomNoList = [];
$("#son_house_room_number_btns>.son_house_room_number_area_div>.weui-flex>.weui-flex__item>.placeholder>.weui-btn").click(function() {
    var btn_first = $(this).attr("class");
    if(btn_first == "weui-btn weui-btn_disabled weui-btn_default") {
        $(this).attr("class", "weui-btn weui-btn_plain-primary");
        selectRoomNoList.push($(this).text());
        console.log(selectRoomNoList)
        // 获取楼层
        var floor_p=$(this).parent().parent().parent().siblings("p").children("a");
        console.log(floor_p.text())
        // console.log(typeof(floor_p.text()))
    } else {
        $(this).attr("class", "weui-btn weui-btn_disabled weui-btn_default");
        // 当取消选项时,将被取消的按钮的文本设置成 null 值
        // indexOf:查找对象中的某个字符串
        selectRoomNoList[selectRoomNoList.indexOf($(this).text())] = null;
        // 再用 splice 将被设置成 null 值的字符串从数组中删除
        // splice(参数一:必需,规定从何处添加/删除元素, 参数二:必需,规定应该删除多少元素)
        selectRoomNoList.splice(selectRoomNoList.indexOf(null), 1);
        console.log(selectRoomNoList)
    }
});

Answer 1

按你所描述的进行 多层判断
点击的时候 判断节点 p 为 第一层的时候 追加到firstList 为第二层追加到 secondList 依次类推
对于你的节点

            $('a').click(function(e){
             if($(e.target).parent().parent().parent().parent().siblings('p').text() == "第一层"){
                 firstList.push()
             }else if($(e.target).parent().parent().parent().parent().siblings('p').text() == "第二层"){
                 secondList.push()
             }
             })

Answer 2

可以在这个类上加上一个 data-index 属性，点击的时候获取他的data-index属性，分为 1 2 3，然后根据不同的值存在不同的数组中

Answer 3

你存在数据可以用对象来保存，如：

selectRoomNoList = {}
//保存第一层的
selectRoomNoList[0] = [];
selectRoomNoList[0].push()
//保存第二层的
selectRoomNoList[1] = [];
selectRoomNoList[1].push()

Answer 4

我觉得可以换个思路，开始的数组用多维数组，然后在按钮上存个索引坐标，这样就是：

<div id="son_house_room_number_btns">
    <div class="son_house_room_number_area_div">
        <p>第1层</p>
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">
                    <a href="javascript:void(0);" class="weui-btn weui-btn_disabled weui-btn_default" data-floor="1" data-room="1">A101</a>
                </div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">
                    <a href="javascript:void(0);" class="weui-btn weui-btn_disabled weui-btn_default" data-floor="1" data-room="2">A102</a>
                </div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">
                    <a href="javascript:void(0);" class="weui-btn weui-btn_disabled weui-btn_default" data-floor="1" data-room="3">A103</a>
                </div>
            </div>
        </div>
    </div>
    <div class="son_house_room_number_area_div">
        <p>第2层</p>
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">
                    <a href="javascript:void(0);" class="weui-btn weui-btn_disabled weui-btn_default" data-floor="2" data-room="1">A201</a>
                </div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">
                    <a href="javascript:void(0);" class="weui-btn weui-btn_disabled weui-btn_default" data-floor="2" data-room="2">A202</a>
                </div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">
                    <a href="javascript:void(0);" class="weui-btn weui-btn_disabled weui-btn_default" data-floor="2" data-room="3">A203</a>
                </div>
            </div>
        </div>
    </div>
</div>

selectRoomNoList = [];
$("#son_house_room_number_btns").on("click", ".weui-btn", function(e) {
    e.stopPropagation();
    
    var $this = $(this),
        floor = $this.data("floor") - 1, //数组自0始
        room  = $this.data("room") - 1;
    if($this.hasClass("weui-btn_disabled")) { //存在weui-btn_disabled类，说明是未选
        selectRoomNoList[floor][door] = 1; //0代表未订，1代表预定
    } else {
        selectRoomNoList[floor][door] = 0;
    }
    console.log(selectRoomNoList);
    $this.toggleClass("weui-btn_disabled"); 变更$this的weui-btn_disabled类，有则去之，无则添之
});

至于输出所有的预定房间，可以自己写个小function循环遍历下数组，如果内容是1那么就可以通过index算出来相应的房间号push到一个新数组，最后return这个数组出来就好。