javascript - 基于MD数组中的值更改容器外观的问题

我目前正在根据数组中是否满足某个值以及是否随后使用套接字和一些Jquery实时将某个值定位在容器中的方式来更改某些容器的工作方式。

对于单个网页它可以正常工作，但是当我打开同一网页的两个实例时，如果数组中没有重复值，则当我刷新页面时，它将开始复制容器。

在下面的图像中，我单击了左侧实例的刷新，但是当应该只有两个时，另一个容器出现在右侧。每次刷新左侧页面时，都会继续添加一个值，但是当我刷新右侧页面时，它只有两个，左侧有三个。



数组的外观：

[ [ 'User_488', null ],
  [ 'User_487', 'disable' ],
  [ 'User_477', 'disable' ],
  [ 'User_490', 'disable' ],
  [ '1000', 'enable', 'offline' ],
  [ '1001', 'enable', 'online' ],
  [ '1002', 'disable' ],
  [ '1004', 'disable' ]]

基于上述数组更改容器外观的代码，似乎是问题的根源：

socket.on("eventsCalls", function (calldata) {
    for (var i = 0; i < calldata.length; i++) {
        if (calldata[i][0] && calldata[i][2] === "Ringing") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("answer noanswer default").addClass("ring").attr('data-content', calldata[i][3]);
        } else if (calldata[i][0] && calldata[i][2] === "Hangup") {
            $("div[class*='tile']:not(.DND):contains('" + calldata[i][0] + "')").removeClass("answer noanswer default").addClass("hangup").attr('data-content', calldata[i][3]);
            setTimeout(function () {
                $("div[class*='tile']").removeClass("hangup");
            }, 3000);
        } else if (calldata[i][0] && calldata[i][2] === "ANSWER") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("ring noanswer default").addClass("answer").attr('data-content', calldata[i][3]);
        } else if (calldata[i][0] && calldata[i][2] === "NOANSWER") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("ring default").addClass("noanswer").attr('data-content', calldata[i][3]);
        } else if (calldata[i][0] && calldata[i][4] === "DND") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("hangup default").addClass("DND");
        } else if (calldata[i][0] && calldata[i][4] === "") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("DND default");
        }
    }
});

socket.on("eventsRegister", function (regisdata) {
    for (var i = 0; i < regisdata.length; i++) {
        if (regisdata[i][2] === "online") {
            $("div[class*='tile']:not(.answer .noanswer .ring .hangup):contains('" + regisdata[i][0] + "')").removeClass("ring default").css("background-color", "#78ff4d").html("<h6><img  src='../images/online.png'> <b>" + regisdata[i][0] + "</b></h6><p><span></span></p>");
        } else if (regisdata[i][2] === "offline") {
            $("div[class*='tile']:not(.answer .noanswer .ring .hangup):contains('" + regisdata[i][0] + "')").removeClass("ring").addClass("default").css("background-color", "white").html("<h6><img  src='../images/offline.png'> <b>" + regisdata[i][0] + "</b></h6><p><span></span></p>");
        }
    }
});

的CSS

.default {
    opacity: 0.4;
    filter: alpha(opacity=40);
    background-color: white;
}
.hangup {
    background-color: LightSlateGray !important;
}
.hangup:after {
    font-weight: bold;
    font-size: 12px;
    content: url('../images/hangup.png') " + " attr(data-content);
}
.answer {
    background-color: orange !important;
}
.answer:after {
    font-weight: bold;
    font-size: 12px;
    content: url('../images/Incall.png') " +" attr(data-content);
}
.noanswer {
    background-color: #006666 !important;
}
.noanswer:after {
    font-weight: bold;
    font-size: 12px;
    content: url('../images/busy.png') " +" attr(data-content);
}
.ring {
    background-color: yellow !important;
}
.ring:after {
    font-weight: bold;
    font-size: 12px;
    content: url('../images/ring.png') " +" attr(data-content);
}
.DND {
    background-color: red !important;
}
.DND img {
    display: none;
}
.DND h6:before {
    content: url('../images/dnd.png');
}

任何人都知道为什么会发生这种情况，目前对此感到困惑。

编辑：JS Fiddle to emulate what is suppose to happen/ what its suppose to look like when there are multiple instances.

最佳答案

发现了这个问题，这是非常小的问题，我正在删除带有默认类的所有内容，每次状态更改时都会删除它，因此现在它将使用class tile删除所有内容，并防止任何重复的容器。

socket.on("presenceusers", function (userPresence) {
    $('.tile').remove();\\ <------
    for (var i = 0; i < userPresence.length; i++) {
        if (userPresence[i][1] === "enable") {
            $presence.append('<div class="col-md-2 md tile default"><h6><img src="../images/offline.png"><b>' + userPresence[i][0] + '</b></h6></div>');
        }
    }
});

关于javascript - 基于MD数组中的值更改容器外观的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36450676/