How to avoid the click event of the same class attribute in the web page?

, ,

,,,,,,...

when I click inside the first floor, the data acquisition is normal. At that time, when I clicked on the room number in the second floor, the data of that room number was stored in the data on the first floor together. How to separate the data? For example, the first layer is the data of the first layer, and the second layer is the data of the second layer. The current code is as follows:

selectRoomNoList = [];
$("-sharpson_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)
    }
});
Aug.23,2021

perform multi-layer judgment as you described
when you click to determine that the node p is the first layer, append to firstList, append to the second layer, append to secondList, and so on
for your node
            $('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()
             }
             })

you can add a data-index attribute to this class. When you click, you can get its data-index attribute, divide it into 1 2 3, and then store it in different arrays


according to different values.

you have data that can be saved with objects, such as

selectRoomNoList = {}
//
selectRoomNoList[0] = [];
selectRoomNoList[0].push()
//
selectRoomNoList[1] = [];
selectRoomNoList[1].push()

I think we can think differently, start the array with a multi-dimensional array, and then store an index coordinate on the button, which is:

selectRoomNoList = [];
$("-sharpson_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; //01
    } else {
        selectRoomNoList[floor][door] = 0;
    }
    console.log(selectRoomNoList);
    $this.toggleClass("weui-btn_disabled"); $thisweui-btn_disabled
});

as for outputting all reserved rooms, you can write a small function loop to traverse the next array. If the content is 1, you can calculate the corresponding room number push to a new array through index, and finally return this array.

Menu