html - 如果有记录则隐藏 .message-notif 类，否则如果没有记录则显示

Question

请看下面的代码：

    .menu-notif-f {
        position: absolute;
        top: 50px;
        right: 12px;
        background-color: #ffffff;
        width: 320px;
        height: 480px;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 3px 22px 0px rgb(0 0 0 / 15%);
        animation: ani_desk_menuuserf .16s ease;
    }

    .menu-notif-t._title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        color: #555555;
        border-bottom: 1px solid #d5fff8;
    }

    .menu-notif-l._notif-title {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: .04px;
        color: #555555;
    }

    .meni-notif-r._notif-see-all {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: .04px;
        color: #01d2af;
    }

    ._profile-c {
        background: url(../media/icons/_overview/profile.png);
        background-size: 66%;
    }
    .menu-notif-img {
        width: 66px;
        height: 66px;
        /*height: 9vw;
        max-width: 45px;
        max-height: 45px;
        min-width: 45px;
        min-height: 45px;*/
        background-color: #ffffff;
        border-radius: 50px;
        box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
        background-repeat: no-repeat;
        background-position: center;
        padding: 5px;
    }

    .menu-notif-c._notif-c {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        margin: 5px 5px;
    }

    .menu-notif-cl {
        flex: 0 0 30%;
    }

    .menu-notif-cr {
        flex: 0 0 70%;
    }

    .menu-notif-dt {
        display: flex;
        justify-content: space-between;
        margin-bottom: 3px;
        align-items: center;
    }

    .menu-notif-name {
        font-size: 14px;
        font-weight: 600;
        color: #01d2af;
    }

    .menu-notif-time {
        font-size: 13px;
        font-weight: 600;
        color: #657688;
    }

    .menu-notif-desc {
        font-size: 13px;
        color: #657688;
        display: -webkit-box;
        max-width: 100%;
        /*height: 30px;*/
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu-notif-cc::-webkit-scrollbar {
        display: none;
    }

    .menu-notif-cc {
        overflow: auto;
        height: 420px;
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        top: 50px;
    }

    .hdr-noah-c a {
        color: #ffffff;
        text-decoration: none;
    }

<div class="menu-notif-f">
    <div class="menu-notif-t _title">
        <div class="menu-notif-l _notif-title">Notification</div>
        <div class="meni-notif-r _notif-see-all">See All</div>
    </div>
    
    <div class="menu-notif-cc">
        <div class="menu-notif-c _notif-c">
            <div class="menu-notif-cl">
                <div class="menu-notif-img _profile-c"></div>
            </div>
            <div class="menu-notif-cr">
                <div class="menu-notif-dt">
                    <div class="menu-notif-name">Test Name</div>
                    <div class="menu-notif-time">03:53</div>
                </div>
                <div class="menu-notif-desc">
                    Login details need to be update
                </div>
            </div>
        </div>

        <div class="menu-notif-c _notif-c">
            <div class="menu-notif-cl">
                <div class="menu-notif-img _profile-c"></div>
            </div>
            <div class="menu-notif-cr">
                <div class="menu-notif-dt">
                    <div class="menu-notif-name">Test Name</div>
                    <div class="menu-notif-time">03:53</div>
                </div>
                <div class="menu-notif-desc">
                    Login details need to be update
                </div>
            </div>
        </div>

        <!-- This will shown if there is no notification available. Hide if there is an exsiting notification. -->
        <div class="message-notif">
            <div class="currently-para">There's nothing to be shown as of now</div>
        </div>
    </div>
</div>

谁能帮我这个？我的目标是如果有记录 .message-notif 类将隐藏，如果没有记录 .message-notif 类将显示。使用 jQuery？目前，我没有任何 jQuery 代码，这就是 .message-notif 显示的原因，但现在有 2 条记录意味着 .message-notif 现在应该被隐藏。请帮助我如何完成这种过渡。提前致谢

标签： htmljquerycss

Answer 1

使用了 for 循环，因为您在 no message div 标签上没有#id，但是这样的事情应该可以工作：

var notifications = document.querySelectorAll(".menu-notif-c");

var noNotif = document.querySelectorAll(".message-notif");

if (notifications.length > 0) {
  for (let i = 0; i < noNotif.length; i++) {
    noNotif[i].style.display = "block";
  }
} else {
  for (let i = 0; i < noNotif.length; i++) {
    noNotif[i].style.display = "none";
  }
}