undefinedfix
Sign in

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

Seoheroplus edited in Sun, 10 Apr 2022

图片描述

When I click the room numbers corresponding to these floors, I need to get the corresponding floor numbers and the room numbers selected by users,

The current code implementation is that when the user selects the room number, he obtains the selected room number, and then obtains the number of layers. The room number is stored in the array. At present, it seems that there is no problem, and I can get what I want, but there is a puzzle here

When I click the room number in the first layer, data acquisition is normal. When I click the room number in the second layer, the data of that room number is stored in the data of the first layer together. How to separate these 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:

<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)
    }
});
4 Replies
user618065
commented on Sun, 10 Apr 2022
According to the multi-layer judgment described by you, when you click to judge the node P as the first layer, add it to the first list, add it to the second list, and so on
            $('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()
             }
             })
AIdrick
commented on Mon, 11 Apr 2022

You can add a data index attribute to this class. When you click it, you can get its data index attribute, which is divided into 1, 2, 3, and then exists in different arrays according to different values

maxpenguin
commented on Mon, 11 Apr 2022

Your existing data can be saved with objects, such as:

selectRoomNoList = {}
//保存第一层的
selectRoomNoList[0] = [];
selectRoomNoList[0].push()
//保存第二层的
selectRoomNoList[1] = [];
selectRoomNoList[1].push()
birchmeier
commented on Mon, 11 Apr 2022

I think we can change our thinking. The first array is a multidimensional array, and then we can save an index coordinate on the button

<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类,有则去之,无则添之
});

As for the output of all the 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 through the index, push it to a new array, and finally return the array.

lock This question has been locked and the reply function has been disabled.