如果页面上不存在 Div Class，则显示 SweetAlert 弹出窗口

Question

如果 div class 不在页面上，我正在尝试显示 SweetAlert 弹出窗口，它似乎适用于 ID 但不适用于 classes。

如果页面上没有 div class，谁能帮助显示这个弹出窗口？

<div class="box">
    <img id="mainimage" src="image.jpg">
</div>

https://sweetalert2.github.io/

CDN https://cdn.jsdelivr.net/npm/sweetalert2@8

正在工作（我们有一个名为 mainimage 的 ID，弹出窗口不显示。当我更改为 mainimages 时，它会正常显示弹出窗口）

if (!document.getElementById("mainimage")) {
    Swal.fire({
        title: 'Rick Astley',
        html: '<iframe width="100%" height="300" src="//www.youtube.com/embed/dQw4w9WgXcQ?wmode=transparent&amp;iv_load_policy=3&amp;autoplay=0" frameborder="0"></iframe>'
    });
};

当我尝试检查排除的 class 名称 (carrd) 是否存在时，它似乎不起作用，或者它是否已更改为页面上的 div

if (!document.getElementsByClassName("carrd")) {
    Swal.fire({
        title: 'Rick Astley',
        html: '<iframe width="100%" height="300" src="//www.youtube.com/embed/dQw4w9WgXcQ?wmode=transparent&amp;iv_load_policy=3&amp;autoplay=0" frameborder="0"></iframe>'
    });
};

Answer 1

根据该函数的结果检查长度属性。

if (document.getElementsByClassName("carrd").length === 0) {
    Swal.fire({
        title: 'Rick Astley',
        html: '<iframe width="100%" height="300" src="//www.youtube.com/embed/dQw4w9WgXcQ?wmode=transparent&amp;iv_load_policy=3&amp;autoplay=0" frameborder="0"></iframe>'
    });
};

解释：getElementsByClassName 总是 returns 一个 HTML 集合，因此它不会按照您期望的方式使用 ! 运算符

它与 getElementById 函数一起工作，因为 returns 一个找到的元素，或者 null 如果没有找到元素。

Answer 2

document.getElementsByClassName("carrd")

returns 具有该卡片的元素数组 class。使用以下代码。

if(document.getElementsByClassName("carrd").length === 0)

如果页面上不存在 Div Class，则显示 SweetAlert 弹出窗口

Display SweetAlert popup if a Div Class does NOT exist on the page

html

javascript

sweetalert

sweetalert2